静岡のHP屋コラム

2016.12.30

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.jquery.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ページに何か一工夫したいと思ったらこのプラグインを使ってみてはいかがでしょうか。

お気軽にお問い合わせください
参加無料HP活用セミナーのご案内

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

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

その他の地域の方はお気軽にご相談ください。

HP成功法則45(無料小冊子)プレゼント中

セミナーのご案内&実績

「地域+サービス名」で顧客をつかむ最新SEO対策セミナー

お店や商品、サービスの情報や評判などを調べるとき、多くの方が手元にあるスマホやタブレットを使ってその場で調べるようになりました。地域情報を調べる見込み客にアプローチする為に、サイトや店舗の情報を上位表示させるためはどうすればいいのか、その具体的な方法をお伝えします。

【11月/12月】集客が2倍になるスマホサイト徹底公開セミナー

スマホの普及率は爆発的に増えており、スマホサイトの重要性は高まり続けています。今回のセミナーでは、スマホで見やすく、目的の行動をしやすいサイトにするためのポイントをお伝えします。

10/19(水)集客が2倍になるスマホサイト徹底公開セミナー@沼津

スマホの普及率は爆発的に増えており、スマホサイトの重要性は高まり続けています。今回のセミナーでは、スマホで見やすく、目的の行動をしやすいサイトにするためのポイントをお伝えします。

新着情報一覧へ

サイト内検索

このサイトの運営会社

㈱アーティスティックス
411-0943 静岡県駿東郡長泉町下土狩690-1-101

TEL:055-928-6500
FAX:055-928-6501
お問い合わせはこちら
運営会社情報はこちら

ページの先頭へ