【jQuery】雪を降らせるプラグインを簡単に導入する方法

夏より冬が好き。タロウです。

お気づきの通り、Mavericksのサイトに雪が降り始めました！
（TOP下の方のContactsです）

jQueryのプラグインjQuery-Snowfallで簡単に実現できたのでご紹介します。

完成形

好きな場所に好きなだけ好きな量を降らせることができます。（もちろん吹雪にも）

手順

jsを配置しよう
jsを読み込ませよう
scriptを作成しよう

jsを配置しよう

まずはgithubからソースをダウンロードしましょう。
解凍後に下記の.jsファイルを任意の場所へコピーします！

dist/snowfall.jquery.min.js

※構成にもよりますが、./asset/js配下にいれています。。

jsを読み込ませよう

jQueryの読み込み後にsnowfall.jquery.min.jsを読み込ませます。


<script src="./assets/js/snowfall.jquery.min.js" charset="UTF-8"></script>

これで準備は整いました！
次のステップで雪を降らせたい部分を作りましょう！

scriptを作成しよう

今回はこのdivに対して雪を降らせます。

<div class="topContact_snow"></div>

jQueryでクラスタを指定するので、classかidをつけましょう。
※jQueryではcssの疑似要素(::beforeや::after)を指定するこはできませんのでご注意を！

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

headタグなどのソース上に記載します。
細かなオプションがありますが、サイズ・速度・量だけで事足ります。
（速度と量を増やすと猛吹雪になります笑）

また雪以外にも木の葉や雨などを表現しても臨場感が出てより迫力がでるかと思います。