CSS3 とほんのちょっとの JavaScript で雪を降らす

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

このエントリーをはてなブックマークに追加
Pocket

最近暑いですねぇ. ってことで雪を降らしてみました. 去年は, JavaScript と Canvas エレメントでこんなのを作りました.

今回は CSS3 とほんのちょっとの JavaScript コードで簡単にできます.

SAMPLE And DATA

サンプルはこちらで見ることができます.

雪が降ってきます.

データはここからダウンロードできます

CODE

コード全体です. 

<!DOCTYPE html> 
<html lang="ja"> 
    <head> 
        <meta charset="utf-8"> 
        <title>CSS3 - Snow</title>
        
        <style>
        
        body {
            height: 1000px;
            
            background: -webkit-linear-gradient(top, #1f2273 0%, #000000 100%);
            background: linear-gradient(top, #1f2273 0%, #000000 100%);
        }
        
        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 = 256; // 生成する雪の上限
        var CREATE_SPEED = 100; // 生成スピード
        
        window.onload = function()
        {
            // ベースとなる雪エレメントを生成
            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);
        }
        
        </script>
        
    </head>
    
    <body>
        
        <h1>CSS3 - Snow</h1>
        
    </body>
</html>

POINT

CSS3 の linear-gradient(線形グラデーション)で背景を夜に

linear-gradient というプロパティで簡単に線形グラデーションを表現できます. 設定できるパラメータはこんな感じです. 

background: linear-gradient(グラデーションの方位 or 角度, 色 位置, 色 位置, ...);

“色 位置” の部分は複数指定することが可能です.今回は下記のように使用しています.

body {
    height: 1000px;
    
    background: -webkit-linear-gradient(top, #1f2273 0%, #000000 100%);
    background: linear-gradient(top, #1f2273 0%, #000000 100%);
}

CSS3 の radial-gradient(円形グラデーション)で雪を表現

radial-gradient というプロパティで簡単に円形グラデーションを表現できます. 設定できるパラメータはこんな感じです. 

background: radial-gradient(中心位置, 形状 大きさ, 色 位置, 色 位置, ...);

linear-gradient と同様 “色 位置” は複数指定可能です. 今回のサンプルで使用している部分はこちら. 

.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%);
}

-webkit-animation と @-webkit-keyframes で雪を降らす

.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); }
}

document.createElement と classList.add で雪エレメントを生成

document.createElement で div エレメントを生成して, その div エレメントに classList.add で snow クラスを設定しています. 

// ベースとなる雪エレメントを生成
var original_snow = document.createElement("div");
original_snow.classList.add("snow");

内部的にはこういったエレメントが作られています. 

<div class="snow"></div>

cloneNode で 雪エレメントを複製.

cloneNode で先ほど作成した snow エレメントを複製し, classList.add で雪用アニメーションクラスを追加しています. 最後に document.body.appendChild でボディエレメントに雪エレメントを追加すれば雪が降ってきます. 

// 雪エレメントを複製
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);

涼しくなっていただければ幸いです.

見た目で参考にしたサイトです. こちらはがっつり Canvas です.

TRACK BACK URL

POST COMMENT

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

COMMENT