jQueryで雪を降らせてみよう

2022.1.29 更新

皆さまごきげんよう。

本日はjQueryで雪を降らせてみようの巻です。

今回はdivを雪の一粒に仕立て、jQueryでランダムな数値を取得・複製し、それをcssのアニメーションでループさせて雪を降らせてみようと思います。

今回作ってみるものはこちらです。

1.htmlファイルを作る

今回は htmlファイル、cssファイル、jsファイルの3つのファイルを作ります。
ファイル名は、それぞれsnow.html、snow.css、yuki.jsとしました。

htmlファイルはこちらです。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>雪を降らせてみる</title>
<link rel="stylesheet" href="snow.css" type="text/css">
</head>

 <body>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <!-- jQueryを読み込むためのリンク -->
    <script type="text/javascript" src="yuki.js"></script>
 </body>
</html>

2.windowサイズを取得する

次にjsファイルを作ります。今回作ったのはこちらです。

 
 $(function(){
     var w = $(window).width();//window幅を取得する。
     var h = $(window).height();//windowの高さを取得する。
     var divs = '';//変数に空の文字列
     for (var i=1 ; i<=80 ; i++) {
     //var i=1は初期値。1にした場合、iが1~80になるまで繰り返す。
     var sx = Math.floor(Math.random()*w);
     var sy = Math.floor(Math.random()*h);
     //Math.randomで０から1未満のランダムな数字を取得し、そこにwindow幅を掛ける。
     //それをMath.floorで小数点以下を切捨て、整数にする。これをsxとする。syも同様に。
     divs += "<div style='left:"+ sx +"px; top:"+ sy +"px;'></div>";
     //leftの値にsx、topの値にsyを指定したdivをdivsに足す。forで繰り返す。
     //+=で"<div style='left:"～ を、forが抜けるまでひとつづつ増やす。
    }
    $("body").append(divs);
     //bodyにdivsを足す。
  });

これを順に説明します。

var w = $(window).width();
var h = $(window).height();

として、変数wと変数hに画面の幅と高さを取得します。

変数divsに空の文字列を定義します。’ ‘　は空の文字列のことです。

var divs = ‘ ‘;

3.ランダムな数値を取得して、forで繰り返し処理を行う

関数 Math.randomで０から1未満のランダムな数字を取得し、そこに先ほど定義したwindow幅＝wを掛ける。それを関数 Math.floorで小数点以下を切捨て、整数にします。これをsxと定義します。syも同様です。

var sx = Math.floor(Math.random()*w);
var sy = Math.floor(Math.random()*h);

これを繰り返しの関数 for を使い、処理を行います。

for (var i=1 ; i<=80 ; i++)

var i=1というのは初期値です。この場合は変数 i が、1から80の間は繰り返しを実行し、81になると終了します。

次に先に定義しておいたdivsを、下記のように書きます。

divs += “<div style=’left:”+ sx +”px; top:”+ sy +”px;’></div>”;

leftの値にsx、topの値にsyを指定したdivをdivsに足す。forで（ここでは80回）繰り返す。+= は “<div style=’left:”+ sx +”px; top:”+ sy +”px;’>という処理を、forが終了するまでひとつづつ増やす、という意味です。

jQueryの関数、appendを使って、bodyにコンテンツ(ここではdivs)をを追加します。

$(“body”).append(divs);

jQueryで背景画像を時間で切り替える

4.cssでアニメーション設定をする

最後にcssでアニメーション設定をします。

今回はdivを一粒の雪片とし、cssのセレクタ、:nth-of-type(n) を使って３種類の大きさと速さの違う雪片を舞わせるよう、アニメーションさせてみました。

ちなみに、:nth-of-type(n) は、nの部分に適用したいn番目の数字を入れますが、

:nth-child(n)　･･･　n番目の要素に適用される
:nth-child(2n)　･･･　偶数番目の要素に適用される
:nth-child(3n)　･･･　3の倍数番目の要素に適用される

といった風に使います。

これで三種類の異なる大きさの雪片を作り、それぞれのアニメーションする速さを変えて奥行き感を出します。

手前のものほど大きくはっきりと見え、速度も速くみえますので、サイズが小さいのものほど速度を遅く、blurを多めにかけて輪郭をぼかしています。このサイトでも何度か登場しているパララックス（視差効果）ですね。

最初のdivのアニメーション設定で、animation-delay(-10sとなっているところ)を10秒前からアニメーションが始まるように設定することで、アニメが唐突に始まらないようにしています。


  body{
    background: #000;
    overflow: hidden;
  }
  div {
    background-color: #fff;
    height: 0.5em;
    width: 0.5em;
    border-radius:1em;
    position: absolute;
    box-shadow: #fff 0 -100vh;
    animation:anime1 12s -10s linear infinite;
    filter: blur(4px);
  }
  div:nth-of-type(2n){
    background-color: #fff;
    height: 0.7em;
    width: 0.7em;
    border-radius:2em;
    animation-duration: 9s;
    filter: blur(3px);
  }
  div:nth-of-type(3n){
    background-color: #fff;
    height: 1em;
    width: 1em;
    border-radius:2.5em;
    animation-duration: 7s;
    filter: blur(2px);
  }
  @keyframes anime1{
   0% {
    transform:translateY(0vh);
   }
   100% {
    transform:translateY(100vh);
   }
  }

画像をつかって葉っぱや花びらを散らしてみても良いですね。
アニメーションでさらに回転を加えたり、工夫次第でいろんな表現が出来そうです。

次回はワードプレスの背景に雪を降らせてみたいと思います。

ワードプレスの背景に雪を降らせてみよう

jQueryで雪を降らせてみよう

目次

1.htmlファイルを作る

2.windowサイズを取得する

3.ランダムな数値を取得して、forで繰り返し処理を行う

4.cssでアニメーション設定をする

いいね: