Serene Bachに雪を！

チュートリアル | 12 月 29th, 2007

冬の間だけでも、サイトに来ていただいているみなさんに雪を見せてみませんか？Wordpressではすでにお馴染みのサービスですが、Serene Bachでもやってみたいという方もいると思い、簡単な設置方法をご紹介します。まずは実際にどんな風に雪が降っていくかをサンプルでご覧ください。いかがだったでしょうか？

1.　ダウンロード

それでは早速、雪を降らす準備をしましょう。こちらの配布元のリンクからSnowStormをダウンロードします。現時点では最新バージョンは1.2です。

2.　ファイルのアップロード

ダウンロードをしたファイルを解凍し、アップロードします。アップロードをするのはフォルダであるimageとscriptの二つです。Serene Bachではindex.htmlと同じディレクトリにアップロードします。（間違って解凍したファイルの中にあるindex.htmlをアップロードしないようにしてください。）

3. テンプレートへの組み込み

最後に使用しているテンプレートの<head>～</head>の間に下のタグを組み込みます。

<script type="text/javascript" src="{site_top}script/snowstorm.js"></script>

4.　設定の変更

雪の降るスピードや量はscriptフォルダの中にあるsnowstorm.jsを編集することにより、変えることが可能です。編集可能部分は70行目～80行目の間にある所です。それでは実際に色々試してみてください。

var usePNG = true; // falseでPNGの代わりにGIFを使用　（軽くなります。）
var imagePath = 'image/snow/'; // 雪のイメージへのディレクトリ　(画像ファイルへのパス)
var flakeTypes = 6; // 使用する雪の種類の数
var flakesMax = 128; // 画面の中の最大雪の量
var flakesMaxActive = 64; // 一度に雪が画面内で降る最大量
var vMax = 2.5;
var flakeWidth = 5; // 雪と雪の間の幅　（ピクセル）
var flakeHeight = 5; // 雪と雪の間の高さ　（ピクセル）
var flakeBottom = null; // 下に積もる雪の最大量
var snowCollect = true; // 下に積もる機能をオフにしたい場合はfalse
var showStatus = true;