パパはWebデザイナー[DESIGN PAPA]

ネットサーフィンをしていると、たまにページ上で雪が降ってたり紙ふぶきが
舞ってたり、流星が流れていたりというサイトを見かけることがあります。

こういうのって実際自分で作ろうとすると、かなりの知識とテクニックが
必要ですが、そういった知識がなくてもちょっとソースとファイルを加える
だけで、誰でも簡単に自分のサイトに取り入れることが出来ます。

色々な方法があるとは思いますが、私が利用させていただいたのは
以下のサイトです。

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

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

1. http://www.schillmania.com/projects/snowstorm/script/
   より「snowstorm.js」をダウンロードし、雪を降らせたいページと
   同階層に「script」フォルダを作成後、設置。
2. 雪を降らせたいページに
   <script type=”text/javascript” src=”script/snowstorm.js”></script>
   を追加。
3. ページ・「snowstorm.js」と同階層に「image」フォルダを作成。
   「image」フォルダ内に「snow」フォルダを作成。
4. 「snow」フォルダ内に雪の画像（gifとpngファイル）を0.gif～5.gifの
   名前で作成＆設置。
5. アップロード

ファイル階層

./
+ 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内で
編集可能です。

季節に合わせてページにこういった効果を持たせるのもアリかも
知れませんね(*^-^)

written by kazz \\ tags: JavaScript, 雪