CSS3 とほんのちょっとの JavaScript で雪を降らす – クリスマス Ver.
クリスマスが近づくにつれて, 昔書いたエントリー『CSS3 とほんのちょっとの JavaScript で雪を降らす』へのアクセス数が増えてってたので, クリスマスバージョンを作って見ました.(とはいってもジングルベルが流れるだけですが…)
-webkit-animation を使っているので webkit 系(chrome や safari)でしか動作しません.
Sample
サンプルはこちら.
雪が降りながら, ジングルベルが再生されます.
ダウンロードはこちら.
Code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS3 - Snow</title>
<style>
body {
background: -webkit-linear-gradient(top, #1f2273 0%, #000000 100%);
background: linear-gradient(top, #1f2273 0%, #000000 100%);
overflow-y: hidden;
}
h1 {
color: white;
}
.snow {
width: 20px;
height: 20px;
position: absolute;
background: -webkit-radial-gradient(50% 50%, ellipse contain, rgba(255, 255, 255, 1.0) 0%, rgba(255, 255, 255, 0.0) 100%);
background: radial-gradient(50% 50%, ellipse contain, rgba(255, 255, 255, 1.0) 0%, rgba(255, 255, 255, 0.0) 100%);
}
.snow-00 { -webkit-animation: snow-00 15s infinite; }
@-webkit-keyframes snow-00 {
0% { -webkit-transform: translate(100px, -100px) scale(1); }
100%{ -webkit-transform: translate(400px, 1000px) scale(1); }
}
.snow-01 { -webkit-animation: snow-01 10s infinite; }
@-webkit-keyframes snow-01 {
0% { -webkit-transform: translate( 0px, -100px) scale(1.5); }
100%{ -webkit-transform: translate(-300px, 1000px) scale(1.5); }
}
.snow-02 { -webkit-animation: snow-02 5s infinite; }
@-webkit-keyframes snow-02 {
0% { -webkit-transform: translate( 0px, -100px) scale(2.0); }
100%{ -webkit-transform: translate(100px, 1000px) scale(2.0); }
}
</style>
<script>
var MAX_SNOW_NUM = 128; // 生成する雪の上限
var CREATE_SPEED = 100; // 生成スピード
window.onload = function()
{
document.body.style.width = window.innerWidth + "px";
document.body.style.height = window.innerHeight + "px";
// ベースとなる雪エレメントを生成
var original_snow = document.createElement("div");
original_snow.classList.add("snow");
// 雪の数
var snow_num = 0;
// 雪を生成
setTimeout(function(){
++snow_num;
// 雪エレメントを複製
var snow = original_snow.cloneNode(true);
// ランダムな位置に配置(X軸のみ)
var left = Math.floor( Math.random()*window.innerWidth );
snow.style.left = left + "px";
// アニメーション用 snow-0? クラスを作成(最後の数字はランダムで 0~2)
snow.classList.add("snow-0" + Math.floor( Math.random()*3 ));
// ボディエレメントに雪エレメントを追加
document.body.appendChild(snow);
// 上限に達するまで繰り返す
if (snow_num < MAX_SNOW_NUM) {
setTimeout(arguments.callee, CREATE_SPEED);
}
}, CREATE_SPEED);
};
window.onresize = function() {
document.body.style.width = window.innerWidth + "px";
document.body.style.height = window.innerHeight + "px";
};
</script>
</head>
<body>
<h1>CSS3 - Snow</h1>
<audio autoplay="true">
<source src="jinglebell.mp3"></source>
<source src="jinglebell.ogg"></source>
</audio>
</body>
</html>
Reference
こちらのサイトからジングルベルの音楽ファイルを拝借させて頂きました. ありがとうございます.
クリスマスだというのに仕事やら, 風邪で体調崩すやらでもうやってらんない. もちろん彼女がいるわけもなく, 私を温めてくれるのは JavaScript とフルパワー稼働で熱くなったPCだけ...
聖なる日にオレは何やってんだろw
『CSS3 とほんのちょっとの JavaScript で雪を降らす – クリスマス Ver.』
http://t.co/fUzirH6y
#css3 #javascript
聖なる日にオレは何やってんだろw
『CSS3 とほんのちょっとの JavaScript で雪を降らす – クリスマス Ver.』
http://t.co/fUzirH6y
#css3 #javascript
RT RT phi_jp: 聖なる日にオレは何やってんだろw
『CSS3 とほんのちょっとの JavaScript で雪を降らす – クリスマス Ver.』
http://t.co/bj1lAhgz
#css3 #javascript
はじめまして・・・
作成してくださったCSSとJavaScriptを、
自分のホームページ内で使わせていただきました。
ありがとうございます。
わざわざコメントありがとうございます.
参考になったようです幸いです.