Posted at

雨の日なので CSS だけで雨のアニメーションを実装する

定番ですが雨の日の気晴らしに。

JavaScript は使わずに CSS ( SCSS )だけで雨が降るアニメーションを実装してみました。


See the Pen
SCSS Rain (No JS)
by mimonelu (@mimonelu)
on CodePen.


コード( SCSS )

.rain {

$rain_drop_height: 20vh;

background-color: #102030;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;

& > div {
animation: rain 500ms linear infinite;
background-color: rgba(#ffffff, 0.25);
position: absolute;
left: 0;
top: -$rain_drop_height;
width: 1px;
height: $rain_drop_height;
transform-origin: center center;
}
@for $i from 1 through 25 {
& > div:nth-child(#{$i}) {
animation-delay: #{$i * 100}ms;
animation-duration: random(250) + 375ms;
left: random(100) + vw;
}
}

@keyframes rain {
from {
transform: rotate(-5deg) translateY(-$rain_drop_height);
}
to {
transform: rotate(-5deg) translateY(100vh + $rain_drop_height);
}
}

}


ミソ


乱数どうするの問題

雨粒の x 座標やアニメーションの再生時間などはランダムな値にしたいところですが、 CSS に乱数を生成する仕様はないため、 SCSS の random() 関数で生成しています。つまり、コンパイルした時に乱数が定数として埋め込まれるだけなので、何度リロードしても同じアニメーションが再生されますが、そこは妥協しました。だって他に方法ないし(´・ω・`)


transform の順番

雨粒を斜めに降らせるにはどうすれば良いでしょう?ここでは transform: rotate(...) translateY(...); とすることで、雨粒が「回転した方向へ移動」するようにしました。これを入れ替えると「角度は無視して移動」することになり、要するに行列計算の順番を制御することで、あ、ご存知で?あ、はい。


おわりに

紙吹雪が瞬きながら舞うアニメーションなんかも実装できますが、無茶せずに JavaScript を、できれば Canvas も使って実装した方が良いでしょうね。