jQueryで雪を降らせてみよう

皆さまこんにちは!

早いもので今年も残すところあと1ヶ月、光陰矢の如し、ですね。皆さま今年の目標は達成出来ましたでしょうか?
私は残念ながら、未だ何ひとつ達成出来ないままムダに年だけ取るという(笑)ってまだまだあと残り1ヶ月、最後まで頑張りますよ!(^^;A

ま、それはさておき(笑)今日はちょっと季節を感じる、jQueryで雪を降らせてみようの巻です。

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

今回作ってみるものはこちら♪

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>

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で0から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 = ‘ ‘;

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

関数 Math.randomで0から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);

cssでアニメーション設定

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

ちなみに、: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);
   }
  }

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

次回はワードプレスの背景に雪を降らせてみたいと思います!(今年中に出来るだろーか?!)

コメントを残す