WEBサイトに雪を降らせることができるjQueryプラグイン「JQuery-Snowfall」

公開日：2014/11/28

jQuery プラグイン雪

WEBサイトに雪を降らせることができるjQueryプラグイン「JQuery-Snowfall」

WEBサイトのページに雪を降らすような効果を出せるjQueryのプラグイン「JQuery-Snowfall」をご紹介します。

このプラグインを使用すると指定した要素に対して、雪を降らせることができます。
画像を使用することができるので、雪以外にも桜など季節ごとに変更したら面白いと思います。

下記に「JQuery-Snowfall」の使い方を記載します。

「JQuery-Snowfall」を使用して雪を降らせる方法

下記のページから「JQuery-Snowfall」をダウンロードします。

JQuery-Snowfall

ファイル読込

jQuery、ダウンロードした「JQuery-Snowfall」を読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="./snowfall.jquery.js"></script>

1 2	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./snowfall.jquery.js"></script>

JS

下記を記述するだけで、ページ全体に雪を降らせることができます。

<script type="text/javascript">
$(function() {
	$(document).snowfall();
});
</script>

$(function() {

$(document).snowfall();

});

</script>

要素を指定する場合は下記のように記述します。

$('#snow').snowfall();

1	$('#snow').snowfall();

<div id="snow"></div>

1	<div id="snow"></div>

サンプル

※下記はオプションを指定してません。

「JQuery-Snowfall」のデモページ

要素を指定した場合の「JQuery-Snowfall」のデモページ

「JQuery-Snowfall」のオプション

下記のように指定します。

<script type="text/javascript">
$(function() {
	$(document).snowfall({
		flakeCount : 100,
		flakeColor : '#FFFFFF'
	});
});
</script>

$(function() {

$(document).snowfall({

flakeCount : 100,

flakeColor : '#FFFFFF'

});

</script>

それぞれのオプションの説明を記載します。

flakeCount

雪の数を指定

flakeCount : 100

1	flakeCount : 100

flakeColor

雪の色を指定

flakeColor : '#FFFFFF'

1	flakeColor : '#FFFFFF'

minSize

最少のサイズを指定

minSize : 1

1	minSize : 1

maxSize

最大のサイズを指定

maxSize : 3

1	maxSize : 3

minSpeed

最少のスピードを指定

minSpeed : 1

1	minSpeed : 1

maxSpeed

最大のスピードを指定

maxSpeed : 5

1	maxSpeed : 5

round

雪を丸める場合

round : true

1	round : true

shadow

雪に影を付ける場合

shadow : true

1	shadow : true

image

画像を指定

image : "img/icon.png"

1	image : "img/icon.png"

上記以外にもオプションはあるので確認してみてください。

まとめ

これから冬になるのでクリスマスやスノーイベントなど、キャンペーンページなどで使用すると雰囲気が出ていいかもしれませんね。

雪の数やサイズを変更できますが、数値を大きくしてしまうとページが見づらくなってしまう可能性があります。
さりげなく追加するのがいいと思います。

画像を指定することも可能なので色々試してみてください。

ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください！

お気軽にご相談ください。
022-716-3883
営業時間　平日9:30～18:00

<< 前の記事

この時期のデザインに最適！クリスマスにピッタリな無料素材まとめ

次の記事 >>

ホームページ制作の参考に！ウェブデザインのまとめサイト9選

仙台のホームページ制作･システム開発･ウェブコンサルティングはアド･エータイプへ。