仙台のホームページ制作・システム開発・ウェブコンサルティングはアド・エータイプへ。

WEBサイトに雪を降らせることができるjQueryプラグイン「JQuery-Snowfall」

公開日:

jQuery

WEBサイトに雪を降らせることができるjQueryプラグイン「JQuery-Snowfall」

 

WEBサイトのページに雪を降らすような効果を出せるjQueryのプラグイン「JQuery-Snowfall」をご紹介します。

 

このプラグインを使用すると指定した要素に対して、雪を降らせることができます。
画像を使用することができるので、雪以外にも桜など季節ごとに変更したら面白いと思います。

 

下記に「JQuery-Snowfall」の使い方を記載します。

 

 

「JQuery-Snowfall」を使用して雪を降らせる方法

下記のページから「JQuery-Snowfall」をダウンロードします。

JQuery-Snowfall

 

ファイル読込

jQuery、ダウンロードした「JQuery-Snowfall」を読み込みます。

 

JS

下記を記述するだけで、ページ全体に雪を降らせることができます。

 

要素を指定する場合は下記のように記述します。

 

サンプル

※下記はオプションを指定してません。

 

「JQuery-Snowfall」のデモページ

 

要素を指定した場合の「JQuery-Snowfall」のデモページ

 

 

「JQuery-Snowfall」のオプション

下記のように指定します。

 

それぞれのオプションの説明を記載します。

 

flakeCount

雪の数を指定

 

flakeColor

雪の色を指定

 

minSize

最少のサイズを指定

 

maxSize

最大のサイズを指定

 

minSpeed

最少のスピードを指定

 

maxSpeed

最大のスピードを指定

 

round

雪を丸める場合

 

shadow

雪に影を付ける場合

 

image

画像を指定

 

上記以外にもオプションはあるので確認してみてください。

 

 

まとめ

これから冬になるのでクリスマスやスノーイベントなど、キャンペーンページなどで使用すると雰囲気が出ていいかもしれませんね。

 

雪の数やサイズを変更できますが、数値を大きくしてしまうとページが見づらくなってしまう可能性があります。
さりげなく追加するのがいいと思います。

画像を指定することも可能なので色々試してみてください。

ブログ作成者3
  • このエントリーをはてなブックマークに追加

ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください!

お気軽にご相談ください。
022-716-3883
営業時間 平日9:30~18:00