We Blog Weblog

JQuery-Snowfall

Web

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"
  });
});

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


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

 

まとめ

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

当サイトに関するご意見、ご感想、制作のご依頼はお問い合わせフォームのほか、Chatworkでも受け付けております。

私たちは、クラウド型ビジネスチャットChatworkを導入しています。

国内利用者数No.1 中小企業向けビジネスチャット「Chatwork」

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

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP