【CSS】CSSアニメーションとJavascriptで雪を降らせてみよう

雪を降らした簡単なCSSアニメーションはないかな？

初心者のために今回はCSSアニメーションで冬にピッタリな雪を降らせてみましょう。

今回の背景はフリーのイラストを使用しているので、お気に入りの背景を使用してオリジナルの作品を作成してください。

HTML、CSS、JavaScriptで実装していきます。

難しく感じましたらエディタにコピペして雰囲気を掴んで後からじっくり書いていくのも良いでしょう。

この記事でできること

背景画像に雪を降らす実装ができる
HTML、CSS、JavaScriptの関連がわかる
コピペでも実装することができる。

ぜひ最後までご覧になって綺麗に雪を降らせてください。

CSSアニメーションとJsを使った実装
CSSアニメーションとJavascriptで雪を降らせてみよう　まとめ

CSSアニメーションとJsを使った実装

それぞれ次の内容でコードを説明していきます。

HTMLとCSSは比較的コードも短いので心配はありません。

JavaScriptは雪を降らすための関数などがありますので少し難しく見えるかもしれ

ませんが、説明していきますので心配なく実装してください。

HTMLで背景の設定
CSSで雪のアニメーションの設定
JavaScriptで雪のサイズと降らせ方の設定

HTML部分のコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SNOW</title>
  <link rel="stylesheet" href="style.css"><!-- CSS読み込み -->
</head>
<body>
  <div class="snow-container">
    <img src="img/snow.jpg">
    <span class="snow" style="width: 12px; height: 12px; left: 489px;"></span>
  </div>

  <script src="main.js"></script><!-- JS読み込み -->
</body>
</html>

HTMLでは背景の設定をします。

class=”snow-containerにimgで画像をおきます。画像名は任意です。

CSS部分のコード

CSSでは背景の設定と雪の降るアニメーションの設定です。

部分で分けて説明します。


/* 背景を表示させるコンテナ */
.snow-container {
  position: relative;
  overflow: hidden; /* 背景からはみ出した雪を隠す */
}
.snow-container img {
  height: 100vh; /*背景の高さ*/
  width: 100%; /* 背景の横幅 */
}

/*雪の色とループ*/
.snow {
  position: absolute;
  background-color: #fff; /*色*/
  border-radius: 50%; /*雪を丸*/
  animation: animate-snow 20s linear; /*アニメーションでループ*/
}

/* 画面からの降り始めと画面から消える時の設定 */
@keyframes animate-snow {
  0% {
    top: 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 100vh;
  }
}

CSS：背景

.snow-container {
position: relative;
overflow: hidden; / 背景からはみ出した雪を隠す /
}
.snow-container img {
height: 100vh; /背景の高さ/
width: 100%; / 背景の横幅 */
}

画像の設定をします。

overflow:hiddenで画面からはみ出た雪を隠します。

heightとwidthで画像のサイズの設定をします。

CSS：雪の色とループ

.snow {
position: absolute;
background-color: #fff; /色/
border-radius: 50%; /雪を丸/
animation: animate-snow 20s linear; /アニメーションでループ/
}

animation: animate-snow 20s linear; はCSSアニメーションで雪が降ってくるスピードとそれループさせる設定をします。

CSS：画面からの降り始めと画面から消える時の設定

@keyframes animate-snow {
0% {
top: 0;
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
top: 100vh;
}
}

keyframesで画面からの降り始めの雪をopacity: 0;で透過。

途中はopacity: 1;で表示

100%の終わりは再びopacity: 0;で透過して消えるようにします。

JavaScript部分のコード

window.addEventListener('DOMContentLoaded', () => {
  // コンテナを指定
  const section = document.querySelector('.snow-container');

  // 雪を生成する関数
  const createSnow = () => {
    const snowEl = document.createElement('span');
    snowEl.className = 'snow';
    const minSize = 5;
    const maxSize = 15;
    const size = Math.random() * (maxSize + 1 - minSize) + minSize;
    snowEl.style.width = `${size}px`;
    snowEl.style.height = `${size}px`;
    snowEl.style.left = Math.random() * innerWidth + 'px';
    section.appendChild(snowEl);

    // 一定時間が経てば雪を消す
    setTimeout(() => {
      snowEl.remove();
    }, 20000);

  }

  // 雪が発生する間隔をミリ秒で指定
  setInterval(createSnow, 300);
});

JS：コンテナを指定

const section = document.querySelector(‘.snow-container’)

HTMLでclassにsnow-containerとつけたものを指定します。

JS：雪を生成する関数

const createSnow = () => {
const snowEl = document.createElement(‘div’);
snowEl.className = ‘snow’;
const minSize = 5;
const maxSize = 15;
const size = Math.random() * (maxSize + 1 – minSize) + minSize;
snowEl.style.width = ${size}px;
snowEl.style.height = ${size}px;
snowEl.style.left = Math.random() * innerWidth + ‘px’;
section.appendChild(snowEl);

const minSize = 5;
const maxSize = 15;
const size = Math.random() * (maxSize + 1 – minSize) + minSize;
snowEl.style.width = ${size}px;
snowEl.style.height = ${size}px;

雪のサイズをランダムにするため最大値・最小値を5px~15pxの間で生成します。
それからHTMLで設定したwidth・heightで指定したランダムに降らせます。

JS：一定時間が経てば雪を消す

setTimeout(() => {
snowEl.remove();
}, 20000);

雪が生成されてから20秒後に消す設定です。数字を変えて早く消すこともできます。

JS：雪が発生する間隔をミリ秒で指定

setInterval(createSnow, 150);

雪が上から発生する間隔の設定をします。数値を減らすと雪が多くなります。