CSS3 とほんのちょっとの JavaScript で雪を降らす – クリスマス Ver.

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

クリスマスが近づくにつれて, 昔書いたエントリー『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

こちらのサイトからジングルベルの音楽ファイルを拝借させて頂きました. ありがとうございます.

作品集(フリー音楽素材)|SHWフリー音楽素材 - SHW Free music.

クリスマスだというのに仕事やら, 風邪で体調崩すやらでもうやってらんない. もちろん彼女がいるわけもなく, 私を温めてくれるのは JavaScript とフルパワー稼働で熱くなったPCだけ...

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT