• RSS
  • Facebook
  • Twitter
  • Google+
  • Instagram
ホーム > JavaScript > Webページに雪や紙ふぶきを降らせたい!

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

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

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

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

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

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

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

以下のサイトです。

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

snow_storm

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

  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内で

編集可能です。

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

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


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

NoFollow Plugin made by Web Hosting

This site uses Akismet to reduce spam. Learn how your comment data is processed.