【この記事を読むのに必要な時間は約 3 分です。】
サイト上に雪を降らせるJqueryプラグイン「Snowfall」(現在のバージョンは1.6)が有名。今回は、設置がもっと簡単な、JavaScriptファイルだけで雪を降らせる「Snowstorm」を紹介する。
これからのクリスマスシーズンに期間限定で利用してみよう。
目次
Snowstormのダウンロード
Snowstormのホームページ
こちらが、Snowstormのホームページ。ホームページ中ほどの「Download」をクリックして、ダウンロードする。
ダウンロードファイル:snowstormv144_20131208.zip
GitHubのSnowstormのページからもダウンロードできる。右下の「Download ZIP」をクリックして、ダウンロードする。
ダウンロードファイル:Snowstorm-master.zip
利用方法
必要ファイルとサーバーへのアップロード
どちらも解凍すると中身は全く同じ。
必要ファイルは、snowstorm-min.jsだけ。
上記ファイルをサーバーにアップロードする。
ヘッダー部分への記載
ヘッダー部分(<head>~</head>の間)に以下のように記載する。
今回紹介している「Snowstorm」はjavascriptであり、いつも紹介しているJqueryプラグインではないので、Jquery本体は必要ない。
<head>
<!-- snowstorm.js -->
<script type="text/javascript" src="(http://から始まるjsファイルをアップロードした場所、snowstorm-min.jsで終わる)"></script>
<!-- /snowstorm.js -->
</head>
カスタマイズ方法
カスタマイズについては、ホームページの中ほどに「Customizing Snowstorm」というのがあり、色々説明されているので参考にして欲しい。
雪の数、色、大きさ、速さなど変更指定できる。
私は以下のようにカスタマイズしてみた。
<head>
<!-- snowstorm.js -->
<script type="text/javascript" src="(http://から始まるjsファイルをアップロードした場所、snowstorm-min.jsで終わる)"></script>
<!-- /snowstorm.js -->
<!-- customize the snowStorm object -->
<script>
snowStorm.snowColor = '#99ccff'; // blue-ish snow!?
snowStorm.flakesMaxActive = 96; // show more snow on screen at once
snowStorm.useTwinkleEffect = true; // let the snow flicker in and out of view
</script>
<!-- /customize the snowStorm object -->
</head>
クリスマスライトも利用できるので、試してみて欲しい。
デモ
現在、お正月も過ぎて雪を降らせていないので、こちらにデモ画面だけ用意しておく。
注意事項
このjavascriptは、Jqueryプラグイン「snowfall」同様、CPUの稼働率が高くなるので、常時設置しないほうが良いと思う。
クリスマスシーズン限定で楽しもう。
以上