JQuery-Snowfall

2022年4月6日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は12月25日の記事で雪を降らせるのに使ったプラグイン「jQuery-Snowfall」について書きます。ぜひダークモードでお楽しみください

雪を降らせてみよう

① GitHubからソースをダウンロード

② jQueryより後に、jsを読み込ませる

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

③ スクリプトにオプションを記述する

$(function() {
  $(document).snowfall({
    flakeCount: 150,
    flakeColor: 'snow',
    minSize: 5,
    maxSize: 10,
    round: true,
    shadow: false
  });
});

flakeCount雪の量

flakeColor雪の色

minSize最小サイズ

maxSize最大サイズ

round雪の形を丸にする

shadow雪に影をつける

簡単ですね！

上記以外にもオプションはあります。

オンオフボタン実装

雪を止めるスクリプトは

$(document).snowfall('clear');

これをボタンで作動するようにします。
IDはclearとしておきます。

$(document).ready(function() {
  $("#clear").on('click', function() {
  $(document).snowfall('clear');
  });
});

雪を降らせるスクリプトはさっき出てきた

$(function() {
  $(document).snowfall({
    flakeCount: 150,
    flakeColor: 'snow',
    minSize: 5,
    maxSize: 10,
    round: true,
    shadow: false
  });
});

これをボタンで作動するようにします。
IDはsnowとしておきます。

$(document).ready(function() {
  $("#snow").on('click', function() {
    $(document).snowfall({
      flakeCount: 150,
      flakeColor: 'snow',
      minSize: 5,
      maxSize: 10,
      round: true,
      shadow: false
    });
  });
});

ボタンにIDを設定して完成...といいたいところですが、このままだと#snowが何度も押せてしまい、無限に雪が増えて処理速度が半端なく落ちます。ていうかたぶんクラッシュします。

なので、#snowは1回しか押せないようにして、#clearを押すと再度#snowが押せるようにします。

<button id="clear" onclick="getElementById('snow').disabled = false;">雪をとめる</button>
                            
<button id="snow" onclick="disabled = true;">雪を降らせる</button>

チェックボックスかラジオボタンを使えばよかったような気もします。今後の課題とします。

他のものを降らせてみよう

オプションで画像を設定すると、雪以外のものを降らせることができます。

$(function() {
  $(document).snowfall({
    flakeCount: 150,
    minSize: 10,
    maxSize: 20,
    image: "○○.png"
  });
});

春はやはり桜の花びらですね。

秋は紅葉をひらひらさせたいですね。

まとめ

夏にひらひら降らせるものってないなぁ

夏は別の方法を使って花火とか流れ星とかやってみたいです。