WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

雪を降らせるプラグインJQuery-Snowfall

f:id:mmmmofu:20160812204937p:plain

デモはこちら
http://efu.sakura.ne.jp/web/snowfall/

GitHubからファイルをダウンロードする
github.com

ダウンロードしたファイルの中から
「snowfall.jquery.js」を取り出し読みこむ

$(function() {
  $(document).snowfall();
});

これでデフォルトの設定で雪を降らせることができる。

オプションで設定を変更することができる。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Snowfall</title>
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="js/snowfall.jquery.js"></script>
  <style>
    body {
      background:#000;
    }
  </style>
  <script>
    $(function() {
    	$(document).snowfall({
      // 雪の量
      flakeCount : 100,
      // 最大サイズ
      maxSize : 30,
      // オリジナル画像を使用する
      image : "img/snow.png"
    	});
    });
  </script>
</head>
<body>
</body>
</html>

JQuery-Snowfallを使用しているサイト

www.banchoboys5.com

bokumachi-anime.com