ここでは画面に雪を降らせるjQuery snowfallの紹介をしていきます。

デモはこちら
https://office-goto.info/demo/snowfall/

Jquery Snowfall Plugin 1.4をダンロード
http://www.somethinghitme.com/2010/12/09/jquery-snowfall-plugin-1-4/

Jquery Snowfall Plugin 1.6で画像を降らせる場合クリアがうまく動作しなかったので1.4のソースをカスタマイズしていきます。

headで読み込み

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="./snowfall.jquery/snowfall.jquery.js"></script>

snowfall.jquery.jsを読み込んでください。

snowfall.jquery.jsの編集

73行目を画像が降らせれるように修正します。

var flakeMarkup = "<img src="" + options.image + "" id="flake-" + this.id;
    flakeMarkup += "" style="width: " + this.size + "px; height: " + this.size + "px;";
    flakeMarkup += "; position: absolute; top: " + this.y + "px; left:" + this.x;
    flakeMarkup += "px; font-size: 0px; z-index: " + options.flakeIndex;
    flakeMarkup += ";" class="snowfall-flakes">";

パラメーターの解説

$(function() {
    $(document).snowfall({
        image      : 'img',      // 画像
        // flakeColor : '#ffffff',  // 画像を使用しない場合色で指定
        flakeCount : 20,         // 数
        flakeIndex : 99999,      // スタイルシートのz-indexの値
        maxSpeed   : 3,          // 最大速度
        minSpeed   : 1,          // 最小速度
        maxSize    : 20,         // 最大サイズ
        minSize    : 2,          // 最小サイズ
        shadow     : true        // 影
    });
});

結構たくさんパラメータをいじれるので、お好みにカスタマイズしてください。

クリア

$(document).snowfall('clear');

flakeCount: 99999などと無理なパラメータを渡すとブラウザがクラッシュしてしまうので気をつけてください。