雪降るjQuery！

2014.11.13

ハロウィンも終わって、今度はクリスマスグッズが店頭をにぎわす季節に入ってきました！
 

季節と絡めた商品がたくさんあるなか、
WEBではというと、大抵季節ものの特集ページで展開しています！
 

でも、そんなコンテンツもってないし、
でもでもやっぱなんかやりたいって時におススメのプラグインです！
 

もちろん設置も簡単なので、
ちょっとだけ冬とかクリスマス気分にしたいときにどうぞ！
 

雪降るjQuery！

「SnowStorm」
URL:
http://www.schillmania.com/projects/snowstorm/
 

雪降るjQuery！デモサイトを作りました！
設置イメージとしてご覧ください。
ページ上でマウスの動きにあわせて雪の降る方向やスピードが変わります。
更に、ページ下に降った雪が少しだけ積るエフェクト付！！
デモページで確認してみてください！
DEMO：
https://liruu.com/demo/snowstorm/
 

既存のページに簡単に設置できるし、これでクリスマスソングでもかければ完璧です！
 

雪降るjQuery！設置方法

1.プラグインのダウンロード
2.設置します！
3.カスタムします！
 

1.プラグインのダウンロード
まずはダウンロード！
DOWNLOAD:
https://github.com/scottschiller/snowstorm/
 

必要なのは、
「snowstorm.js」か「snowstorm-min.js」
 

2.設置します！
headerに先程のファイルを読み込みます。
 

<script src="js/snowstorm.js"></script>

あまりにあっけなく完成！
 

3.カスタムします！
雪の色・数・エフェクトを変えられるみたいです。
 

<script type="text/javascript">
snowStorm.snowColor = '#fff';
snowStorm.flakesMaxActive = 1000;
snowStorm.useTwinkleEffect = true;
</script>

「snowColor」
雪の色を変更します
 

「flakesMaxActive」
一度に降る雪の数を設定します
 

「useTwinkleEffect」
ちらつきの有無を指定します
 

これをheader か jsに追記すればOK！
 
こんな簡単に、ページにあうようにカスタマイズができるのは重宝します！