2014/10/07

ページに雪を降らせよう!『JQuery-Snowfall』の使い方

ページに雪を降らせよう!『JQuery-Snowfall』の使い方

Webページ内に雪を降らせることの出来るプラグイン『JQuery-Snowfall』の使い方を紹介します.

目次

入手方法

https://github.com/loktar00/JQuery-Snowfallにアクセスし,右側のDownload ZIPをクリックしてZIPファイルをダウンロードします.

導入方法

まず,ダウンロードしたZIPファイルを解凍し,jQuery本体とともに読み込みます.

<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript" src="snowfall.jquery.js"></script>

次に,以下のように記述することで,ページ全体に雪のような要素を降らせる事ができます.

$(document).snowfall();

このプラグインでは,オプションを指定することで,速度や粒の大きさを変更することができます.

$(document).snowfall({
    // 雪の量 (数値)
    flakeCount : 550,
    // 色 (RGB)
    flakeColor : "",
    // z-indexの値
    flakeIndex : "888",
    // 最小サイズ (数値)
    minSize : 5,
    // 最大サイズ(数値)
    maxSize : 15,
    // 最低速度(数値)
    minSpeed : 5,
    // 最高速度(数値)
    maxSpeed : 10,
    // 雪の形を丸にする(boolean)
    round : true,
    // 影をつける(boolean)
    shadow : false,
    // 要素に積もらせる場合
    collection : "積もらせる要素",
    // オリジナル画像を使用する場合
    image : "画像へのパス"
});

要素の指定をdocumentから別の要素に変更すれば,その要素内で雪を降らせる事ができます.

動作サンプル

実際に動作しているサンプルはhttp://loktar00.github.io/JQuery-Snowfall/にあります.

まとめ

雪の表現だけでなく,桜の花びらの画像を使用して桜吹雪を表現したり,紙の画像を使用して紙吹雪を表現したりすることができるので,冬に限らず利用できると思います.