【JQuery-Snowfall】簡単に雪、桜、花びらを降らせるプラグイン

雪や桜の花びらが落ちてくるようなWEBページってたまに見ますよね。

ゆっくりひらひらとアニメーションのように落ちてくる雪や桜は見ていて心が和みますよね。

今回は、WEBページに雪や桜や花びらを降らせることができる「JQuery-Snowfall」について紹介していきたいと思います。

ダウンロード

まずは「JQuery-Snowfall」のファイルを一式ダウンロードしましょう。

下記のページからダウンロードすることができます。

ダウンロード後

まずはjQuery本体を用意しましょう。

そしてダウンロードしたファイルに格納されているsnowfall.jquery.min.jsを持ってきて読み込みましょう。

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

jsの記述方法

js

通常は一行で動作させることができます。

jQuery(document).snowfall();

オプションをつける場合は下記になります。

オプションを設定することで数やスピードなど細かい設定をすることができます。

jQuery(document).snowfall({
	flakeCount : 30, //量、数
	flakeColor : '#FFF', //色
	flakeIndex : 1, //重なり
	minSize : 1, //最小サイズ
	maxSize : 10, //最大サイズ
	minSpeed : 1, //最低スピード
	maxSpeed : 3, //最大スピード
	round : true, //形を丸くする
	shadow : false //形に影をつける
});

通常版のサンプル

もし自分で用意した画像を使いたい場合には下記のような記述になります。

imageに画像を指定しました。

jQuery(document).snowfall({
	flakeCount : 30, //量、数
	flakeColor : '#FFF', //色
	flakeIndex : 1, //重なり
	minSize : 5, //最小サイズ
	maxSize : 15, //最大サイズ
	minSpeed : 1, //最低スピード
	maxSpeed : 5, //最大スピード
	round : true, //形を丸くする
	shadow : false, //形に影をつける
	image : 'img/snow.png' //オリジナル画像 
});

画像を指定したサンプル

最後に

画像を指定できるので画像をいろいろ変更すればいろいろなものを降らせるアニメーションができますね。

オプションも少なく指定方法を簡単なので使いやすいプラグインです。