サイトに雪を降らせる方法

logwでは、2月の終わりまでサイトに雪を降らせています。使っているのはsnowfallというjQueryになります。

配布先

Jquery Snowfall Plugin 1.4からダウンロードできます。サンプルファイルの中にデモファイルもあります。

適用方法

～間に、ダウンロードしたファイルの中に入っている『snowfall.jquery.js』または『snowfall.min.jquery.js』を読み込んで下さい。片方だけでいいです。 logwではsnowfall.min.jquery.jsだけを読み込んでいます。

雪を降らせるJavaScriptの記述

雪を降らせる記述をします。

<!-- 雪を降らせる -->
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
$(document).snowfall({
shadow : true,
round : true,
minSize: 4,
maxSize:8,
minSpeed:2,
maxSpeed:5
})
});
// ]]></script>

• minSize→雪の最小サイズになります。
• maxSize→雪の最大サイズになります。
• minSpeed→雪の落ちる最低スピードになります。
• maxSpeed→雪の落ちる最大スピードになります。

雪の停止

上記の設定だけで既に雪はサイトで降ります。このままでは雪は降り続けます。雪を停止するには以下の記述をします。

<!-- 雪を止める -->
<script type='text/javascript'>
$(document).ready(function(){
//Start the snow default options you can also make it snow in certain elements, etc.
$(document).snowfall();
$("#clear").click(function(){
$(document).snowfall('clear'); // How you clear
});
});
</script>

雪を停止する際は、停止するボタンに『id="clear"』と記述します。これでそのボタンをクリックされたときに雪は停止します。

備考

この適用方法は比較的簡単かもしれません。IEでは雪が四角で表示されます。そのためIEにも対応させたい場合はお勧めしません。