どうも！LSSです！！
作りかけているCSSネタがあるのですが、汎用性…変更の手の加えやすさ、という面でどうしたものかと考えています。
作りかけCSS～雨～
コード
<style>
@keyframes rainya{
0%{background-position:0px 0px,0px 0px;}
100%{background-position:-50px 137px,0px 0px;}
}
.rainy{
width:280px;
height:280px;
background-image:linear-gradient(110deg,#ffffff00 10px,#ffffff80 12px,#ffffff00 14px)
,linear-gradient(black,blue,white);
background-size:50px 69px,100% 100%;
animation:rainya 1s linear infinite;
}
</style>
<div class="rainy"> </div>
この「137」とか「69」といった数値が難点で…^^;
算出するのに三角関数を使用します。
アニメーションをスムーズにするのに、「雨ひとつあたりの入る枠の幅」を50px、雨の角度を110度、と決めた場合、「その雨の筋の方向にまっすぐ進むような動きで、なおかつアニメ１回再生後と再生開始時の雨の配置が同じになる」ようにするには、三角関数を用いた計算で算出すると、「137」という数値が出てきます。
※雨ひとつあたりの入る枠、のサイズを幅50 高さ137にし、アニメーションは「左に50、下に137」動くものであれば良い、という計算
ただし、高さの方は「倍数が137」になればよく、およそ半分の「69」でもスムーズな動きになってくれます^^
が、それで作る事はできても「三角関数を使った計算」が必要になるので…扱いにくいなぁ、と^^;
これからのCSS
JavaScriptは三角関数を用いた計算ができます。
なので例えば「雨降りCSSコード生成ツール」みたいなものを作る事は可能ですね^^
一方、CSSには「calc」という「値を計算してくれる関数」があります。
この「calc」内で、三角関数を使った計算もする事ができれば、まだコードいじりやすいのにな…と思い、ふと検索してみると…。
実際、「今後追加される」という候補には入ってるようです！
が、それは数年前から出ていた話でありながら、実装されているブラウザは（今のところ）Safariだけだとか。
今後、全てのブラウザで「CSSに三角関数演算」が追加される日が楽しみ…でありつつ、この雨降りCSSネタは別の方向でなんとか考えたいところですねｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
