jQuery snowfallで画面に雪を降らせる

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

snowfall

デモはこちら
http://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などと無理なパラメータを渡すとブラウザがクラッシュしてしまうので気をつけてください。

jQuery snowfallで画面に雪を降らせる」への1件のフィードバック

  1. ピンバック: 雪が舞うようなヒラヒラ落下するSnowfall jquery pluginを複数画像対応に改造 – へっぽこ開発室

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください