こんにちは！東京フロントエンドのかわなごです。
もう12月ですね…
今年のスピードの速さは個人的に史上最速でした。笑
先週、出勤したらクリスマスツリーを出していて大きさにびっくり！
社員一同で飾り付けしました⭐️
大人になると、こんな機会あまりないので嬉しかったです。
さてさて、今回はクリスマスシーズンにちなんで
WEBページが一気にクリスマスっぽくなるようなプラグインを紹介します！！
それは…
「 JQuery-Snowfall 」
ページに雪を降らせてみましょう〜〜！☃️
① ダウンロード
https://github.com/loktar00/JQuery-Snowfall
Download ZIPボタンを押してzipファイルをダウンロードして解凍してください。
snowfall.jquery.min.jsを使用します。
② 使い方
まず、jqueryを読み込んだあとにsnowfall.jquery.min.jsを読み込みます。
任意のjsファイルに
$(document).snowfall();
と書いたらOKです！
このプラグインはオプションを細かく設定することで
好みの雪をつくることができます！
github後方にオプションについて書かれているのでこちらを元に設定します。↓
flakeCount ...雪の量 flakeColor ...雪の色 (白以外にも設定できます) flakeIndex ...z-indexの値 minSize ...１番小さい雪の大きさ maxSize ...１番大きい雪の大きさ minSpeed ...１番遅い雪のスピード maxSpeed ...１番速い雪の大きさ round ...雪の形を丸にするかどうか（ ture / false ） shadow ...雪に影をつけるかどうか（ ture / false ）
今回わたしはリアルにしてみたかったので以下の設定にしてみました。
$(function () {
$(document).snowfall({
flakeCount: 80,
flakeIndex: "888",
minSize: 1,
maxSize: 4,
minSpeed: 1,
maxSpeed: 5,
round: true,
shadow: false
});
});この設定で簡単なデモを作成しましたので
良かったらご覧ください❄️
デモページ
https://let-it-snow-demo.netlify.app/
結構リアルですよね💡
粒の大きさを大きくすればアニメっぽくなりますし
量を多くしてスピードを早くすれば豪雪地帯の雪にもできます！笑
期間限定のLPページや、
classをつけ外ししてクリスマスの間だけ取り入れたりしても良さそうですね。
お遊びプラグインの紹介でした。⭐️
ここ数年ホワイトクリスマスに遭遇できませんが…
WEBページで味わっちゃいましょう🎄
