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

2018.8.22 JavaScript, jQuery

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

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

ダウンロード

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

設置方法

ヘッダーに読み込み

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/snowfall.jquery.js"></script>

1 2	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/snowfall.jquery.js"></script>

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

フッターへの記述

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

$(document).snowfall({
　flakeCount: 8, //降らせる数
　minSize : 30, // 最小サイズ（数値）
　maxSize : 60, // 最大サイズ（数値）
　minSpeed : 1, // 最低速度（数値）
　maxSpeed : 2, //最大速度
　image : "img/pantu.png", //ここで画像を指定
});

$(document).snowfall({

　flakeCount: 8, //降らせる数

　minSize : 30, // 最小サイズ（数値）

　maxSize : 60, // 最大サイズ（数値）

　minSpeed : 1, // 最低速度（数値）

　maxSpeed : 2, //最大速度

　image : "img/pantu.png", //ここで画像を指定

});

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

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

$(document).ready(function(){
$("#clear").click(function(){
$(document).snowfall('clear'); // How you clear
});
});

$(document).ready(function(){

$("#clear").click(function(){

$(document).snowfall('clear'); // How you clear

});

htmlへの記述

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

<div class="btn"><button id="clear">停止ボタン</button></div>

1	<div class="btn"><button id="clear">停止ボタン</button></div>

デモページ

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