初めに
今回のモノは、cssがメインなものになってるのかな？
と思われます。
意味不明なものは調べていただいたり、コメントして頂くと私も大変ありがたいです。
書いていこう
今回も説明（適当でごめんなさい）は、コード内で書いています。
cssはコメント多めですので、わかるとこは読んでいただかずとも大丈夫だと思います！
それではやってきましょう！
まず、HTML
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snow Fall</title>
<link rel="stylesheet" href="style.css"> <!-- スタイルシートのリンク -->
</head>
<body>
<!-- 雪がふるようにする場所 -->
<div class="snow-container">
<div class="title">Snow Fall</div> <!-- これは、普通にタイトルです。 -->
</div>
<script src="script.js"></script> <!-- スクリプトのリンク -->
</body>
</html>
そして、css。なんか長い（？）
style.css
/*
そのまま作成したら、上と左に余白ができてしまうので、ここで余白のなきよう設定しとく。
イメージしずらい場合は、これをコメントアウトしてみると分かると思います。
*/
* {
margin: 0;
padding: 0;
}
/*
雪を降らせる場所のスタイル
*/
.snow-container {
/*サイズをページ全体に */
width: 100%;
height: 100vh;
/* 背景色を黒に指定 */
background-color: black;
position: relative;
/*
これにより、この要素を基準にして、このなかの要素の相対位置を指定できます。
詳しく知りたい方は、
https://zero-plus.io/media/css-position-relative/
などを見てみてください。
*/
/*
はみ出す要素があるので、それを隠せるよう設定します。
設定しなかったらページが、がぐがぐになります。（試すのならJavaScriptも書いてから試してみてください。）
*/
overflow: hidden;
}
/* タイトルのスタイル */
.title {
/* 色、フォントサイズ、影、の設定 */
color: snow;
font-size: 4.8em;
text-shadow: 2px 3px 7px;
/* snow-containerに対して位置を指定するために */
position: absolute;
/* ど真ん中に位置させる */
top: 50vh;
left: 50%;
transform: translate(-50%, -50%);
}
/* 雪のスタイル */
.snow {
/* 背景色（雪だから、そりゃ、snow です。※redやってみても面白いですｗ） */
background-color: snow;
/* 雪、つまりまるなので、要素の角をまるくします。 */
border-radius: 50%;
/* 位置をsnow-containerの中に相対的に指定できるように */
position: absolute;
/*
雪は降らなきゃいけない（つまり、落ちるようにページ上を移動しなくてはいけないので）アニメーションを指定します。
animation: アニメーション名 アニメーション時間 動き方
（linearは「直線的に」て感じです。詳しくはhttps://developer.mozilla.org/ja/docs/Web/CSS/animation-timing-function）
※アニメーションはこの次、作成します。
*/
animation: snowFall 10s linear;
}
/* 雪のアニメーションの作成 */
@keyframes snowFall {
/* 初め */
0% {
opacity: 0; /* 不透明度を0に（つまり、なんも見えませんね） */
top: 0; /* ページのいっちゃん上に配置します。 */
}
10% {
opacity: 1; /* 見えるようにします。 */
transform: translateX(5px); /* これは、横にちょっと動かすようにして、雪がふらふら落ちるようにしています。なくてもいいです */
}
30% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
70% {
transform: translateX(-5px);
}
90% {
opacity: 1; /* この時もまだ見える状態でなくてはいけないので、この様に書いておきます */
transform: translateX(-5px);
}
100% {
/* 見えなくして、ページのいっちゃん下に位置するようにします */
opacity: 0;
top: 100vh;
}
}
そして、JavaScript。（あ～～。長かったですねｗ）
script.js
// 定期的（今回は100ミリ秒間で）に雪を降らせるよう、setInterver関数を使用します
setInterval(() => {
// 雪を作成します（span要素を作成し、それのクラスにsnowをあてています）
const snow = document.createElement('span');
snow.classList.add('snow');
// snowのスタイル（サイズとページ上の左端からの位置）を指定
snow.style.width = snow.style.height = Math.random() * 8 + 'px'; // これにより、幅、高さが、～８（正確には８は含まれない）でランダムに指定できます
snow.style.left = Math.random() * 100 + '%'; // 雪がページの左端からのどのくらいの距離で位置するようにするかえをランダムで指定
// snow-containerにsnowを子要素として入れてやる
// document.querySelector()するとき、クラスでやるときは、クラス名の前にピリオドが必要です。注意。
document.querySelector('.snow-container').appendChild(snow);
// アニメーションの時間が10秒なので、その時間がたったら削除されるようにします
setTimeout(() => {
// snowを削除します
snow.remove();
}, 10000 /*ミリ秒指定なので、これで10秒です */);
}, 100 /* 何秒ごとにやるか指定してます*/);
以上です。
お疲れ様でした（？ｗ）
最後に
今回のモノは、下のようになるハズ…です。
最後まで読んでくれてありがとう！