ほぼコピペするだけ！jQueryでWebページに雪（または花びらなどの画像）を降らせる方法

テレビを見なくなってから季節感を失いました、網干です。

情報源がネットの情報になってから早数年…、情報の選別の仕方が極端になってしまったので季節ごとの何かを感じることが少なくなってしまいました…。
そんなこんなで年末になってしまったので、年始の準備が全く整っていません。
と、とりあえず部屋の大掃除を始めて年末感を出そうかなと考えています。

さて、今回は「ほぼコピペするだけ！jQueryでWebページに雪（または花びらなどの画像）を降らせる方法」を記載します。
本記事を読む事で、今見ているページのようにオブジェクト（花びら等）がゆらゆらと落下するエフェクトをページに追加することができます。
（このページでは雪は見づらいので花びらを落下させています）

いろいろな個人サイトを眺めているとたまに見かけるこの機能、意外と簡単に実装できるので紹介します。

今回のブログの見出しはコチラです！

1 雪を降らせるためのプログラムファイルをダウンロード
2 プログラムを使って好きなページに雪を降らせる
3 雪ではなく花びらを降らせるための設定方法

雪を降らせるためのプログラムファイルをダウンロード

まず初めに、雪を降らせるためのプログラムファイルをダウンロードします。
ダウンロードは下記のURLから行ってください。
https://github.com/loktar00/JQuery-Snowfall

以下、ダウンロードの方法を記載します。

プログラムのダウンロード方法

URLにアクセスすると下図のようなページに移動します。
ページの右側にある「Clone or download」をクリックしてください。

「Clone or download」をクリックすると下図のような画面が表示されますので、右側の「Download ZIP」をクリックしてください。

「Download ZIP」をクリックするとダウンロードが開始します。
ダウンロードしたファイルはzip形式で圧縮されています。

プログラムファイルのダウンロードは以上になります。

プログラムを使って好きなページに雪を降らせる

先程ダウンロードしたプログラムファイルを解凍して、解凍したフォルダごとサーバー内のアクセスできる領域に設置してください。

これで準備は完了です。早速使ってみましょう！

プログラムの実装

本プログラムはjQueryを使用しているので、headタグに下記の指定が必要になります。

<script src="https://code.jquery.com/jquery-2.2.4.min.js"<</script<

1	<script src="https://code.jquery.com/jquery-2.2.4.min.js"<</script<

次に、ダウンロードしたプログラムを使うために、下記の記述をbody内に記述します。

<script type="text/javascript" src="(ファイルを格納したディレクトリパス)/JQuery-Snowfall-master/dist/snowfall.jquery.min.js"></script>
<script type="text/javascript">
  jQuery(document).snowfall({
    flakeCount : 100,			// 要素の数
    flakeColor : '#FFF',		// 要素の色
    flakeIndex : 999999,		// 要素のz-index
    minSize : 5,				// 要素の最小サイズ
    maxSize : 20,				// 要素の最大サイズ
    minSpeed : 2,				// 要素の最小落下スピード
    maxSpeed : 5,				// 要素の最大落下スピード
    round : true,				// 要素に丸みを持たせる？
    shadow : false				// 要素に影をつける？
    //collection : 'div'		// 要素を指定の要素に積もらせる設定(画像を設定してもflakeColorで指定した要素の色が積もります)
    //image : './image.png'		// 要素を指定の画像に変更
  });
</script>

jQuery(document).snowfall({

flakeCount : 100, // 要素の数

flakeColor : '#FFF', // 要素の色

flakeIndex : 999999, // 要素のz-index

minSize : 5, // 要素の最小サイズ

maxSize : 20, // 要素の最大サイズ

minSpeed : 2, // 要素の最小落下スピード

maxSpeed : 5, // 要素の最大落下スピード

round : true, // 要素に丸みを持たせる？

shadow : false // 要素に影をつける？

//collection : 'div' // 要素を指定の要素に積もらせる設定(画像を設定してもflakeColorで指定した要素の色が積もります)

//image : './image.png' // 要素を指定の画像に変更

});

</script>

これで、ページ内に雪を降らせることができます！

………。

ちょいと分かりにくいかもしれないですね…

ということで、サンプルプログラムを載せておきます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="Shift_JIS">
    <title>snow_sample</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  </head>
  <body bgcolor="#2d2f52" text="#ffffff">
    <script type="text/javascript" src="./JQuery-Snowfall-master/dist/snowfall.jquery.min.js"></script>
    <script type="text/javascript">
      jQuery(document).snowfall({
        flakeCount : 100,			// 要素の数
        flakeColor : '#FFF',		// 要素の色
        flakeIndex : 999999,		// 要素のz-index
        minSize : 5,				// 要素の最小サイズ
        maxSize : 20,				// 要素の最大サイズ
        minSpeed : 2,				// 要素の最小落下スピード
        maxSpeed : 5,				// 要素の最大落下スピード
        round : true,				// 要素に丸みを持たせる？
        shadow : false				// 要素に影をつける？
        //collection : 'div'		// 要素を指定の要素に積もらせる設定(画像を設定してもflakeColorで指定した要素の色が積もります)
        //image : './image.png'		// 要素を指定の画像に変更
      });
    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>snow_sample</title>

</head>

jQuery(document).snowfall({

flakeCount : 100, // 要素の数

flakeColor : '#FFF', // 要素の色

flakeIndex : 999999, // 要素のz-index

minSize : 5, // 要素の最小サイズ

maxSize : 20, // 要素の最大サイズ

minSpeed : 2, // 要素の最小落下スピード

maxSpeed : 5, // 要素の最大落下スピード

round : true, // 要素に丸みを持たせる？

shadow : false // 要素に影をつける？

//collection : 'div' // 要素を指定の要素に積もらせる設定(画像を設定してもflakeColorで指定した要素の色が積もります)

//image : './image.png' // 要素を指定の画像に変更

});

</script>

</body>

</html>

※snowfall.jquery.min.js のパスはサーバー内に格納したディレクトリになりますので注意してください！

上記のプログラムが正常に起動すると、雪の降るページが表示されます。

雪ではなく花びらを降らせるための設定方法

雪を花びらに変えたい場合は、下記のようにimageの部分に花の画像を指定することで実装できます。

<script type="text/javascript" src="(ファイルを格納したディレクトリパス)/JQuery-Snowfall-master/dist/snowfall.jquery.min.js"></script>
<script type="text/javascript">
  jQuery(document).snowfall({
    flakeCount : 100,			// 要素の数
    flakeColor : '#FFF',		// 要素の色
    flakeIndex : 999999,		// 要素のz-index
    minSize : 5,				// 要素の最小サイズ
    maxSize : 20,				// 要素の最大サイズ
    minSpeed : 2,				// 要素の最小落下スピード
    maxSpeed : 5,				// 要素の最大落下スピード
    round : true,				// 要素に丸みを持たせる？
    shadow : false,				// 要素に影をつける？
    //collection : 'div'		// 要素を指定の要素に積もらせる設定(画像を設定してもflakeColorで指定した要素の色が積もります)
    image : '(画像ファイルを格納したディレクトリパス)/example.png'		// 要素を指定の画像に変更
  });
</script>