WEBデザイナーAkiの備忘録

雪とか氷とか色々降らせる「snowfall.jquery.js」(デモあり)

2018.8.22 ,

どうも御無沙汰です。色々と制作が立て込んでいたので、久々の投稿になってしまいました。(汗)
更新が空いてる期間は色んなサイトで色んなことをしたので、備忘録にいっぱい載せられるゥ~~!と思ったっきり…( ˘ω˘)自分の備忘録ですからね、まあ無理なく続けていきたいです。

ということで、今回は「任意の画像を降らせるsnowfall.jquery.js」について。雪とか雨とか他色々、サイト全体に降らせてみたいときにお勧めです!

ダウンロード

まずは公式からZIPファイルをダウンロードします。

設置方法

ヘッダーに読み込み

jqueryとともに「snowfall.jquery.js」を読み込みます。

フッターへの記述

bodyの閉じタグの直前に下記を追加します。色々降らせる設定です。

imageのところは、振らせたい画像のパスを記述。雪や雨以外でも好きな画像を作って降らせることができますね。某仮面ライダーが大好きな私はパンツを降らせてみました。

降らせているものを止める停止ボタンを設置したい場合は、下記の設定も追加しておきます。

htmlへの記述

停止ボタンを設置する場合は、下記のボタンをどこかに設置しましょう。

デモページ

簡単なデモページを作ってみました。
パンツが降り注ぎます。こうやって色々降らせると可愛いですね!

コメント