クリスマスシーズンなので、ブログやサイトに雪を降らせるsnowstormを設置してみた

【この記事を読むのに必要な時間は約 3 分です。】

サイト上に雪を降らせるJqueryプラグイン「Snowfall」（現在のバージョンは1.6）が有名。今回は、設置がもっと簡単な、JavaScriptファイルだけで雪を降らせる「Snowstorm」を紹介する。
これからのクリスマスシーズンに期間限定で利用してみよう。

1 Snowstormのダウンロード
- 1.1 Snowstormのホームページ
2 利用方法
3 デモ
4 注意事項

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>

クリスマスライトも利用できるので、試してみて欲しい。