BLOG

【jQuery】雪を降らせるプラグインを簡単に導入する方法

2019.10.25
TECH

夏より冬が好き。タロウです。

お気づきの通り、Mavericksのサイトに雪が降り始めました!
(TOP下の方のContactsです)

jQueryのプラグインjQuery-Snowfallで簡単に実現できたのでご紹介します。

完成形

好きな場所に好きなだけ好きな量を降らせることができます。(もちろん吹雪にも)

手順

  • jsを配置しよう
  • jsを読み込ませよう
  • scriptを作成しよう

jsを配置しよう

まずはgithubからソースをダウンロードしましょう。
解凍後に下記の.jsファイルを任意の場所へコピーします!

dist/snowfall.jquery.min.js

※構成にもよりますが、./asset/js配下にいれています。。

jsを読み込ませよう

jQueryの読み込み後にsnowfall.jquery.min.jsを読み込ませます。


<script src="./assets/js/snowfall.jquery.min.js" charset="UTF-8"></script>

これで準備は整いました!
次のステップで雪を降らせたい部分を作りましょう!

scriptを作成しよう

今回はこのdivに対して雪を降らせます。

<div class="topContact_snow"></div>

jQueryでクラスタを指定するので、classかidをつけましょう。
※jQueryではcssの疑似要素(::beforeや::after)を指定するこはできませんのでご注意を!

<script type="text/javascript">
	$(document).ready(function(){
		$(".topContact_snow").snowfall(
			{
			    // 雪の量 (数値)
			    flakeCount : 100,
			    // 色 (RGB)
			    // flakeColor : "",
			    // z-indexの値
			    flakeIndex : "888",
			    // 最小サイズ (数値)
			    minSize : 1,
			    // 最大サイズ(数値)
			    maxSize : 5,
			    // 最低速度(数値)
			    minSpeed : 1,
			    // 最高速度(数値)
			    maxSpeed : 3,
			    // 雪の形を丸にする(boolean)
			    round : true,
			    // 影をつける(boolean)
			    shadow : false
			    // 要素に積もらせる場合
			    collection : "積もらせる要素",
			    // オリジナル画像を使用する場合
			    // image : "画像へのパス"
			}
		);
	});
</script>

headタグなどのソース上に記載します。
細かなオプションがありますが、サイズ・速度・量だけで事足ります。
(速度と量を増やすと猛吹雪になります笑)

また雪以外にも木の葉や雨などを表現しても臨場感が出てより迫力がでるかと思います。

まとめ

とても簡単に実現できました。
アニメーションを入れることでより面白みのあるサイトになり、見る人の印象にも深く残ります。

何かを降らせたい!と考えている方にはおすすめのプラグインですので、
ぜひ取り入れてみてはいかがでしょうか!

The following two tabs change content below.
Taro

Taro

ディレクターも、サーバ構築も、ゴリゴリ開発もやります。 オールマイティ担当。 スパイスも甘いものも大好き。