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

loktar00/JQuery-Snowfall · GitHub

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

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

設定できるプロパティ

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

function snow

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

画像を生成

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

落ちる処理

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

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

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

揺れる動き

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

再生

eachでmoveを実行します。

init

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

実行

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

デモ

デモはここから

こんな感じでいかがでしょう。
最低限の機能しかないので、使う場合は、都合にあわせて拡張してください。

jQuery化プラグインしたもの

少し機能を拡張し、jQuery化プラグインしたものも作成してみました。
このページに雪を降らせてみましょう。

このページに雪を降らす

使うのであれば、JQuery-Snowfallのほうが良いと思いますが、奇特な方のために置いておきます。

デモはここから

ダウンロードはここから

そんな感じでまたねー。

アナと雪の女王 (吹替版)
(2014-07-09)
売り上げランキング: 1,432