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

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

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

Snowstormのダウンロード

Snowstormのホームページ

こちらが、Snowstormのホームページ。ホームページ中ほどの「Download」をクリックして、ダウンロードする。
ダウンロードファイル:snowstormv144_20131208.zip

1snowstorm1-3snowstorm

GitHubのSnowstormのページからもダウンロードできる。右下の「Download ZIP」をクリックして、ダウンロードする。
ダウンロードファイル:Snowstorm-master.zip

2snowstorm

利用方法

必要ファイルとサーバーへのアップロード

どちらも解凍すると中身は全く同じ。
必要ファイルは、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>

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

3snowstorm
3-2snowstorm

デモ

現在、お正月も過ぎて雪を降らせていないので、こちらにデモ画面だけ用意しておく。

デモ画面

注意事項

このjavascriptは、Jqueryプラグイン「snowfall」同様、CPUの稼働率が高くなるので、常時設置しないほうが良いと思う。
クリスマスシーズン限定で楽しもう。
以上

Related Posts Plugin for WordPress, Blogger...

もし良ければお願いします。

  • このエントリーをはてなブックマークに追加

良かったらフォローお願いします。