雪が降る前景
常時CSSのみ画像
前景に雪が降る演出を付け加える演出です。1つのd<div>タグとして乗せているので、任意の要素の上に被せられます。今回はわかりやすいよう黒い背景の上に乗せています。
実装のポイント
長さの異なる３つの背景画像を重ねてCSSアニメーションでループするように動かしています。長さの違いがそのまま降る速さの違いになります。レイヤー間の速度差を出すことで奥行きのあるアニメーションになります。左右に揺らめきながら落ちる動きはCSSの@propertyを使うことで簡潔に書けるようになりました。@propertyについては下記記事にて詳しく紹介されています。
ICS MEDIA雪が降る画像は次の3種類です。
▼snowfall1.avif
▼snowfall2.avif
▼snowfall3.avif
うまくタイリングするような画像を使っています。一番長い画像（snowfall3）のスピードが早いので、奥行きにおける手前になるよう大きめの雪を描き、一番短い画像を小さい雪で描いています。雪だけでなく、桜などの花びらにしても面白そうです。
こちらの画像は自由にお使いいただけます。
コード例
HTML
<div class="snowfall">
<!-- 任意の要素を入れられます -->
<div class="snowfallLayer"></div>
</div>
CSS
@property --snofall-progress {
syntax: "<number>";
inherits: false;
initial-value: 0;
}
.snowfall {
position: relative;
width: 100%;
height: 100%;
pointer-events: none;
}
.snowfallLayer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
url("./snowfall1.avif"), url("./snowfall2.avif"), url("./snowfall3.avif");
filter: blur(1px);
background-position:
calc(sin(var(--snofall-progress) * 0.12 * pi + 1) * 2px)
calc(var(--snofall-progress) * 2.56px),
calc(sin(var(--snofall-progress) * 0.1 * pi + 2) * 6px)
calc(var(--snofall-progress) * 3.84px),
calc(sin(var(--snofall-progress) * 0.08 * pi + 3) * 4px)
calc(var(--snofall-progress) * 5.12px);
background-size: 256px auto;
animation: snowfall 8s linear infinite;
}
@keyframes snowfall {
0% {
--snofall-progress: 0;
}
100% {
--snofall-progress: 100;
}
}
