雪降るjQuery!

2014.11.13

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

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

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

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



雪降るjQuery!

snowstorm
 

「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!
 
こんな簡単に、ページにあうようにカスタマイズができるのは重宝します!

Webサイトテンプレート
WEBサイトホームページ制作
Webサイトテンプレート

Contact

About us

ご要望に沿いながら、効果を最大限に引き出すデザインや柔軟な企画アイディアを創造することをモットーに、東京を拠点として活動を広げています。

About us

Contact

WEBサイト制作などのご質問やご依頼は、メールフォームにて承っております。
ご送付いただいてから、7営業日以内に返信いたします。
 
サイトリニューアルやキャラクター制作などをお考えでしたら、ぜひお問合せください。

Contact