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

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

配布先

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

適用方法

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

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

雪を降らせるJavaScriptの記述

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

ソースを表示
印刷SyntaxHighlighterについて
01<!-- 雪を降らせる -->
02<script type="text/javascript">// <![CDATA[
03$(document).ready(function(){
04$(document).snowfall({
05shadow : true,
06round : true,
07minSize: 4,
08maxSize:8,
09minSpeed:2,
10maxSpeed:5
11})
12});
13// ]]></script>
  • minSize→雪の最小サイズになります。
  • maxSize→雪の最大サイズになります。
  • minSpeed→雪の落ちる最低スピードになります。
  • maxSpeed→雪の落ちる最大スピードになります。

雪の停止

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

ソースを表示
印刷SyntaxHighlighterについて
01<!-- 雪を止める -->
02<script type='text/javascript'>
03$(document).ready(function(){
04//Start the snow default options you can also make it snow in certain elements, etc.
05$(document).snowfall();
06 
07$("#clear").click(function(){
08$(document).snowfall('clear'); // How you clear
09});
10});
11</script>

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

備考

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

個人支援・寄付について

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

  • ビットコイン：3LHnADwZwUbic2L45EnVJEykiG6KfbqrwS