JQueryで簡単にページに雪や落ち葉を降らせる方法

ブログの本題と全く関係ないですが、みなさんLINEって使っていますか?
先日ふとLINEのトーク画面を見ると雪が降っているではないですか。これを見て思いました。

そういえばホームページでも雪とか降ってるサイトを見かけるなぁ・・・
と思ったので今回はホームページに雪を降らせる方法をご紹介します。

jqueryを使用してホームページに雪を降らせる3ステップ

探せば他にもあると思いますが、今回は比較的に簡単に実装可能なjQueryのプラグイン「JQuerny-Snowfall」を使用した方法を解説していきます。

ステップ1 「JQuerny-Snowfall」の入手

「JQuerny-Snowfall」はGitHubでダウンロード可能です。
以下のリンクを開き、緑色の「Clone or download」→「Download ZIP」をクリックしてZIPファイルをダウンロードしてください。

https://github.com/loktar00/JQuery-Snowfall/

ダウンロードが完了したら、「dist」フォルダの中にある「snowfall.min.js」を使用します。

ステップ2 「JQuerny-Snowfall」の読み込み

ファイルの準備が完了したら次はプラグインの読み込みです。
以下のように<head></head>内に以下のタグを入力してjQuerny本体とプラグインを読み込んでください。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="/js/snowfall.min.js"></script>

※パスは実際の環境に合わせて書き換えてください。(jQuery本体は1.8.3でなくても大丈夫です。)
上記タグは上がjQuery本体で下がプラグインの読み込みとなります。

ステップ3 実行するためのjavascriptを記載する

読み込みの後は実行するためのjavascriptを記載します。具体的にはステップ2で入力したタグの下に以下のタグを続けて入力すればOKです。

<script type='text/javascript'>
$(document).ready(function(){
    $(document).snowfall();
});
</script>

以上のたったの3ステップでページに雪を降らせることができました。

実際に雪を降らせたWebページのデモが以下のページです。

雪を降らせたWebページのデモ



おまけ 雪以外を降らせてみよう オプション紹介

雪を降らせるだけであればステップ3までの手順で完了ですが、今回使用したプラグイン「JQuerny-Snowfall」では雪以外のものを降らせたり、雪の量や速度を変更するオプションも組み込まれています。オプションは以下のような形式で記載します。

<script type='text/javascript'>
$(document).ready(function(){
    $(document).snowfall({
        option : value,
        option : value,
                :
        option : value
    });
});
</script>

上記optionには以下表のものが使用可能です。

オプション名(option) 値(value) 備考
flakeCount 数値 雪の量
flakeColor カラーコード(#000) 雪の色
flakeIndex 数値 雪の重なり方(z-index)
minSize 数値 雪の最小サイズ
maxSize 数値 雪の最大サイズ
minSpeed 数値 雪の最低速度
maxSpeed 数値 雪の最高速度
round boolean型(true または false) 雪の形を丸くする
shadow boolean型(true または false) 雪に影を付ける
collection 要素名(body) 雪を要素に積もらせる
image 画像パス オリジナル画像を降らせる

オプションを使用して、雪の代わりに落ち葉を降らせるデモページを作成しました。

落ち葉を降らせたWebページのデモ

まとめ

今回はjQueryのプラグイン「JQuerny-Snowfall」を使用して雪を降らせる方法をご紹介しましたが、いかがでしたでしょうか?

オプションを使用すれば雪を降らせる以外にもいろいろな演出を行うことが可能ですので、Webページに何か一工夫したいと思ったらこのプラグインを使ってみてはいかがでしょうか。

ホームページ応援隊 訪問対応エリア

静岡市・沼津市・三島市・駿東郡(清水町・長泉町・小山町)・富士市・富士宮市・裾野市・御殿場市・伊豆市・伊豆の国市・伊東市・熱海市・焼津市・藤枝市・函南町

その他の地域の場合でもご訪問可能な場合がございます。
ご希望の方は、お気軽にご相談ください。