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

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

配布先

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

適用方法

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

logwではsnowfall.min.jquery.jsだけを読み込んでいます。

雪を降らせるJavaScriptの記述

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

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

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

雪の停止

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

[javascript]
<!-- 雪を止める -->
<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>
[/javascript]

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

備考

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

この記事に関する技術サポート・ご相談

「手順通りにいかない」「自社環境への構築を代行してほしい」など、
インフラ・サーバー周りでハマった際はお気軽にご相談ください。

相談・問い合わせフォームを開く

※ Googleフォームへ移動します（初回相談無料）

個人支援・寄付について

サイトラボでは個人支援・寄付を受けております。ご協力いただける方はお願いいたします。当サイトではビットコインで受け付けております。

  • ビットコイン：3LHnADwZwUbic2L45EnVJEykiG6KfbqrwS