【jQuery】雪を降らせる

2021年1月1日2021年1月14日jQuery

はじめに

2021年になりました。明けましておめでとうございます。寒い日が続きますが、僕が住んでいる地域では雪はめったに降りません。娘に雪をみせてあげたい。その一心でコレを作り上げました。

できた

See the Pen
abmqoWE by AtsushiNakata (@nakata999)
on CodePen.

まぁキレイ。

解説

まずはCSSから。

//【CSS】
@keyframes snowAnimation {
  0% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(100vh);
  }
}

@keyframesで"snowAnimation"という名前のアニメーションを設定します。画面の上から下まで移動するだけのものです。

//【CSS】
.snow {
  position: absolute;
  transform: translateY(-100px);
  border-radius: 50%;
  background-color: white;
  animation-name: snowAnimation;
  animation-timing-function: linear;
}

そして"snow"クラスに先ほど作った"snowAnimation"を設定します。次はjQueryです。

//【jQuery】
for (i = 0; i < 50; i++) {
  setSnow(document.createElement("div"));  
}

“document.createElement(“div")"でdiv要素を作って、それを自作関数"setSnow"に渡してあげます。これをループで50回繰り返します。ループの回数を多くすれば雪の数も多くなるというワケですね。

//【jQuery】 
/*** 雪を作る関数 ***/
  function setSnow(elem){
    var e = $(elem);
    e.addClass("snow");
    
    //雪の種類
    var type = Math.floor(Math.random() * (4-1) + 1);
    
    //雪の種類ごとに大きさと速度を変える
    var size = 0;
    if(type == 1){
      size = Math.floor(Math.random() * (50 - 40) + 40);
      e.css("width",size + "px");
      e.css("height",size + "px");
      e.css("animation-duration",Math.random() * (4-3) + 3 + "s");
    } else if(type == 2){
      size = Math.floor(Math.random() * (30 - 20) + 20);
      e.css("width",size + "px");
      e.css("height",size + "px");
      e.css("animation-duration",Math.random() * (6-5) + 5 + "s");
    } else if(type == 3){
      size = Math.floor(Math.random() * (15 - 10) + 10);
      e.css("width",size + "px");
      e.css("height",size + "px");
      e.css("animation-duration",Math.random() * (8-7) + 7 + "s");
    }
    
    //雪の出現位置
    e.css("left",100 * Math.random() + "%");
    
    //アニメーション開始タイミング
    e.css("animation-delay",Math.random() * 4 + "s");
    
    //雪を追加
    document.body.appendChild(elem);

    /*** アニメーションが終了した時 ***/
    (略)  
  }

“setSnow"の中身です。雪を「遠・中・近」の3種類に分けて、ランダムで「雪の大きさ・速度・水平方向の位置・動き出すタイミング」を設定しています。"Math.random()"は0以上1未満の値を返してくれます。"Math.random() * 10″と書けば0以上10未満の値を返し、"Math.random() * 10 +10″とすれば10以上20未満の値を返してくれます。もろもろの設定ができたところで、"document.body.appendChild"で作成したdiv要素をbodyに追加します。

//【jQuery】 
/*** 雪を作る関数 ***/
  function setSnow(elem){
    
    (略)

    /*** アニメーションが終了した時 ***/
    elem.addEventListener("animationend",function(){
      //雪を削除
      document.body.removeChild(this);
      //新しく雪を作る
      setSnow(document.createElement("div"));
    });  
  }

“setSnow"の最後のところ。作成したdiv要素にイベントリスナーを設定します。キャッチするイベントは"animationend"。こうすればアニメーションが終了したタイミング、つまり雪が画面下まで移動したタイミングを知ることができ、そのタイミングで雪を削除して新しい雪を作ります。新しい雪を作るときは自分自身"setSnow"を呼び出して無限にループさせます。これで雪は永遠(とわ)に降り続けることになります。

【CSS】
.filter {
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px);
  z-index: 999;
}

最後にまたCSS。"backdrop-filter"プロパティを使って画面全体をぼかします。こうすることで、デジタル技術を用いながらも、雪のふわふわ感であったりガラス越しに雪を眺めているかのような叙情的かつ幻想的な作品に仕上げることに成功。まったくもってニクイ演出です。

あとがき

年明け一発目ということでキレイなものができましたね。架空のお店のwebサイトも作らないとなぁと思いながら、ついつい楽しい方に引っ張られてしまう。ポートフォリオサイトも作りたいなぁ…。

おしゃれ度

★★☆☆☆