Skip to content

Instantly share code, notes, and snippets.

@katsumitakano

katsumitakano/event.js

Last active August 29, 2015 13:58
Show Gist options
  • Save katsumitakano/9954481 to your computer and use it in GitHub Desktop.
Save katsumitakano/9954481 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Kami Fubuki
Raw
event.js
$(function(){
var width = $(window).width();
// 定期的に紙吹雪を降らす
var create = function(){
var kami = $("<div>")
.addClass("kami")
.css("left", rand(width))
.css("background", color());
$("body").append(kami);
// 数秒後にその要素はHTML上から取り除く
setTimeout(function(){
kami.remove();
}, 6000);
setTimeout(create, 300);
}
setTimeout(create, 300);
// 0~nまでの整数を返却
function rand(n){
return Math.floor( Math.random() * n );
}
// 十色の色をランダムに返す
function color(){
var colors = [
"rgb(255, 80, 79)",
"rgb(255, 230, 61)",
"rgb(80, 220, 100)",
"rgb(65, 195, 157)",
"rgb(77, 181, 220)",
"rgb(42, 115, 190)",
"rgb(110, 36, 165)",
"rgb(228, 91, 180)",
"rgb(50, 50, 50)",
"rgb(200, 200, 200)"
];
return colors[ rand(colors.length) ];
}
});
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Kami_Fubuki</title>
<link rel="stylesheet" href="style.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="event.js"></script>
</body>
</html>
Raw
style.css
/* Config */
/*************************************************/
html,
body {
width: 960px;
height: 500px;
position: relative;
}
.kami {
position: absolute;
top: -50px;
width: 30px;
height: 30px;
opacity: 0.8;
-webkit-animation: fall 3s linear 0s 1 normal backwards;
-moz-animation: fall 3s linear 0s 1 normal backwards;
-ms-animation: fall 3s linear 0s 1 normal backwards;
-o-animation: fall 3s linear 0s 1 normal backwards;
animation: fall 3s linear 0s 1 normal backwards;
}
/* Animations */
/*************************************************/
@-webkit-keyframes fall {
from {
-webkit-transform: translateX(0) translateY(0) skew(30deg);
}
12.5% {
-webkit-transform: translateX(-50px) translateY(75px) skew(0deg);
}
37.5% {
-webkit-transform: translateX(50px) translateY(225px) skew(-30deg);
}
50% {
-webkit-transform: translateX(0) translateY(300px) skew(30deg);
}
62.5% {
-webkit-transform: translateX(-50px) translateY(375px) skew(0deg);
}
87.5% {
-webkit-transform: translateX(50px) translateY(525px) skew(-30deg);
}
to {
-webkit-transform: translateX(0) translateY(600px) skew(30deg);
}
}
@keyframes fall {
from {
transform: translateX(0) translateY(0) skew(30deg);
}
12.5% {
transform: translateX(-50px) translateY(75px) skew(0deg);
}
37.5% {
transform: translateX(50px) translateY(225px) skew(-30deg);
}
50% {
transform: translateX(0) translateY(300px) skew(30deg);
}
62.5% {
transform: translateX(-50px) translateY(375px) skew(0deg);
}
87.5% {
transform: translateX(50px) translateY(525px) skew(-30deg);
}
to {
transform: translateX(0) translateY(600px) skew(30deg);
}
}
Raw
style.less
.animation(@name, @duration, @function, @delay, @count, @direction, @mode){
-webkit-animation: @name @duration @function @delay @count @direction @mode;
-moz-animation: @name @duration @function @delay @count @direction @mode;
-ms-animation: @name @duration @function @delay @count @direction @mode;
-o-animation: @name @duration @function @delay @count @direction @mode;
animation: @name @duration @function @delay @count @direction @mode;
}
/* Config */
/*************************************************/
@square: 30px; // 紙吹雪の大きさ
@fallBottom: 600px; // どれくらい下まで落ちるか
@fallSpeed: 3s; // 落ちるスピード
html, body{
width: 960px;
height: 500px;
position: relative;
}
.kami{
position: absolute;
top: -50px;
width: @square;
height: @square;
opacity: 0.8;
.animation(fall, @fallSpeed, linear, 0s, 1, normal, backwards);
}
/* Animations */
/*************************************************/
// chrome
@-webkit-keyframes fall {
from {
-webkit-transform: translateX(0) translateY(0) skew(30deg);
}
12.5%{
-webkit-transform: translateX(-50px) translateY(@fallBottom * 0.125) skew(0deg);
}
37.5%{
-webkit-transform: translateX(50px) translateY(@fallBottom * 0.375) skew(-30deg);
}
50%{
-webkit-transform: translateX(0) translateY(@fallBottom * 0.5) skew(30deg);
}
62.5%{
-webkit-transform: translateX(-50px) translateY(@fallBottom * 0.625) skew(0deg);
}
87.5%{
-webkit-transform: translateX(50px) translateY(@fallBottom * 0.875) skew(-30deg);
}
to{
-webkit-transform: translateX(0) translateY(@fallBottom) skew(30deg);
}
}
// normal
@keyframes fall {
from {
transform: translateX(0) translateY(0) skew(30deg);
}
12.5%{
transform: translateX(-50px) translateY(@fallBottom * 0.125) skew(0deg);
}
37.5%{
transform: translateX(50px) translateY(@fallBottom * 0.375) skew(-30deg);
}
50%{
transform: translateX(0) translateY(@fallBottom * 0.5) skew(30deg);
}
62.5%{
transform: translateX(-50px) translateY(@fallBottom * 0.625) skew(0deg);
}
87.5%{
transform: translateX(50px) translateY(@fallBottom * 0.875) skew(-30deg);
}
to{
transform: translateX(0) translateY(@fallBottom) skew(30deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment