jQueryを使って、自分で雪を降らせてみた

2014-12-23
JavaScript

もりさんです。
そろそろクリスマスということで、雪を降らせて見ました。

雪を降らすjQueryのプラグインでは、JQuery-Snowfallが有名みたいですが、ここは自分でやってみたいと思います。

本当にちゃんと作ると、パーティクルエンジンになってしまい、さすがに大変なので、簡単に考えます。

こんな感じでいきましょう。

設定できるプロパティ

設定できるプロパティはこんな感じにします。

wrap:'*',//配置する場所
targetClass: '*',//オブジェクトのクラス
size: {max: *, min:*},//オブジェクトのサイズ
objectMax: *,//オブジェクトの数
speed: *,//オブジェクトの速度
swing: {max: *, min:*, speed:*},//オブジェクトの揺れ幅
imgpath: '*'//オブジェクトの画像パス

function snow

この中に書いていきます。

function snow(param){
...
}

画像を生成

画像をobjectMaxだけ生成します。
念のため、画像をプリロードしてから数を増やします。
生成が終わったらplayを実行するようにしておきます。

//生成
var create = function() {
    var img = document.createElement('img');
    img.src = param.imgpath;
    $(img).on('load',function(){
        for (var i = 0; i < param.objectMax; i += 1) {
            $(param.wrap).append('');
        }
        play();
    });
};

落ちる処理

x座標は、windowサイズ内でランダムにします。

y座標は、動きがあるので、開始と終了を決めます。
エンドは、とりあえずwindowサイズにします。
スタートは、少し上のほうでランダムにして、雪がバラつくようにします。

アニメーションを開始したら、揺れる動きを実行します。
揺れる動きと並列にできるようにqueue:falseにします。

//落ちる動き
var move = function(obj) {
    var xpos = Math.floor(Math.random() * $(window).width()),
        ypos = {
                start:Math.random() * 1000 * -1,
                end:$(window).height()
               },
        size = Math.floor(Math.random() * (param.size.max - param.size.min) + param.size.min),
        time = Math.floor(Math.abs(ypos.start - ypos.end) * (param.speed / 480)) * (param.size.max / size);

    $(obj)
    .stop()
    .css({width: size + 'px', top: ypos.start + 'px', left: xpos + 'px' ,position:'fixed'})
    .animate({ top: ypos.end + 'px'}, { duration:time, queue:false, easing:'linear', complete:function(){
        move(this);
    }});
    swing(obj);
};

揺れる動き

設定した範囲内でランダムで、揺れを決めます。
上で、leftを使っているので、margin-leftで動かします。

//揺れる動き
var swing = function(obj) {
    var swingNum = Math.floor(Math.random() * (param.swing.max - param.swing.min) + param.swing.min) * -1;
    $(obj).animate({marginLeft: swingNum + 'px'}, {duration:param.swing.speed, queue:false, complete:function(){
        $(obj).animate({marginLeft: 0}, {duration:param.swing.speed, queue:false, complete:function(){
            swing(this);
        }});
    }});
};

再生

eachでmoveを実行します。

//再生
var play = function(){
    $('.' + param.targetClass).each(function(){
        move(this);
    });
};

init

windowサイズが変わると、終了位置が変わるので、再描画します。

//init
var init = function(){
    create();
    $(window).on('resize',function(){
        play();
    });
};
init();

実行

function snowの外に、実行する処理を書けば、完成です。

$(document).ready(function() {
    snow({
        wrap:'#wrap',                      //配置する場所
        targetClass: 'snow',               //オブジェクトのクラス
        size: {max: 30, min:10},           //オブジェクトの最大サイズ
        objectMax: 50,                     //オブジェクトの数
        speed: 2500,                       //オブジェクトの速度
        swing: {max: 20, min:5, speed:800},//オブジェクトの揺れ幅
        imgpath: 'img/snow.png'             //オブジェクトの画像パス
    });
});