サイトに雪を降らせてみる
もうすぐクリスマスですねぇ。。
Googleさんとかでは、ロゴ自体をクリスマス風にアレンジして↓、サイト自体に季節感を持たせていますが。。。
どうせなら、もうちょっと凝ったことやっちゃいましょ～。
っちゅうことで、JavaScriptで簡単にサイトに雪を降らせてみました。。。
って・・・実際どんなんやねん！っちゅうかたは。。↓ここからサンプルをどうぞ～。
JavaScriptで雪降らせております。
ちゅうことは、背景の画像を変えたり。。。
ブログにこのスクリプトくみこんでみたり。。。
雪じゃなくて、春には桜の花びらを降らせてみたり。。。
紙ふぶきを降らせてみたり。。。
まぁ、アイデア次第でいろいろできそうですねぇ。。
っちゅうわけで、今日は簡単にサイトに雪を降らせるやり方をご紹介じゃ。
1. 今回使わせていただきました、DHTML Snowstorm!さんのサイトの下のほうにあるDownloadってところから、SnowStormファイルをダウンロードして、解凍。
2. 解凍したフォルダの中の「image」と「script」フォルダをサーバにアップロード
3. 画像を表示したいhtmlの<head>から</head>の間に
<script language=”JavaScript” type=”text/javascript” src=”script/snowstorm.js”></script>
って書いて、snowstorm.jsを読み込みます。
それだけですわ～。簡単ですねぇ。。
「image」フォルダの中にある「snow」フォルダに1～5.pngって名前をつけて画像を上書きしたら、いろんなものを降らせることもできますよん。
|
|
|
この記事に関連する記事
![Web creators (ウェブクリエイターズ) 2008年 10月号 [雑誌]](http://ecx.images-amazon.com/images/I/51VGsA-4aJL._SL75_.jpg)
![Web Designing (ウェブデザイニング) 2008年 09月号 [雑誌]](http://ecx.images-amazon.com/images/I/518kQgLKnxL._SL75_.jpg)
![Web creators (ウェブクリエイターズ) 2008年 09月号 [雑誌]](http://ecx.images-amazon.com/images/I/517QVsIHXtL._SL75_.jpg)
