ホーム > JavaScript > Webページに雪や紙ふぶきを降らせたい！

Webページに雪や紙ふぶきを降らせたい！

ネットサーフィンをしていると、たまにページ上で雪が降ってたり紙ふぶきが

舞ってたり、流星が流れていたりというサイトを見かけることがあります。

こういうのって実際自分で作ろうとすると、かなりの知識とテクニックが

必要ですが、そういった知識がなくてもちょっとソースとファイルを加える

だけで、誰でも簡単に自分のサイトに取り入れることが出来ます。

色々な方法があるとは思いますが、私が利用させていただいたのは

以下のサイトです。

参考：http://www.schillmania.com/projects/snowstorm/

設置方法は以下になります。

http://www.schillmania.com/projects/snowstorm/script/

より「snowstorm.js」をダウンロードし、雪を降らせたいページと

同階層に「script」フォルダを作成後、設置。
雪を降らせたいページに

<script type=”text/javascript” src=”script/snowstorm.js”></script>

を追加。
ページ・「snowstorm.js」と同階層に「image」フォルダを作成。

「image」フォルダ内に「snow」フォルダを作成。
「snow」フォルダ内に雪の画像（gifとpngファイル）を0.gif～5.gifの

名前で作成＆設置。
アップロード

ファイル階層

./
+ image/
  + snow/
    0.png
    1.png
    2.png
    3.png
    4.png
    5.png
    0.gif
    1.gif
    2.gif
    3.gif
    4.gif
    5.gif
+ script/
    snowstorm.js

雪の画像を紙ふぶきに変えれば紙ふぶきが舞うというわけです。

降るスピードや画面下部に積もっていく設定など、snowstorm.js内で

編集可能です。

季節に合わせてページにこういった効果を持たせるのもアリかも

知れませんね(*^-^)