【CSS】雪というより…ほこり？ｗ【実験】
どうも！LSSです！！
※画面がアレですが、お使いの端末は（多分）正常ですｗ
１２月もそろそろ中盤。
クリスマスや大晦日が近づいていると同時に、大掃除のシーズンでもありますね。
去年のこの時期、このブログではクリスマスに向けて、
という準備を経て、
で盛大に雪を降らせたりしたものでした。
今年もクリスマスにはなにか凝った装飾をやってみたいものですが…ちょっと準備的に、思いついた事をこの記事上で試してみます。
画面上に浮遊しています
昨年のクリスマス時点ではまだ身についていなかった、LSS自身のCSS知識として、
- preserve-3d による立体表現
- pointer-events: none; によるCSSからの要素クリック無効化
の２つを使っています。
特に立体表現によって、比較的単純なCSSコードの割りには複雑な動きになったと思います^^
また、「pointer-events: none;」の指定により、この物体がブログ上のクリックを阻害する事はありません。
コード
<style>
@keyframes kaiten1{
0%{transform:rotateY(0deg) rotateZ(0deg);}
100%{transform:rotateY(360deg) rotateZ(360deg);}
}
@keyframes kaiten2{
0%{transform:rotateY(120deg) rotateZ(120deg);}
100%{transform:rotateY(480deg) rotateZ(480deg);}
}
@keyframes kaiten3{
0%{transform:rotateY(240deg) rotateZ(240deg);}
100%{transform:rotateY(600deg) rotateZ(600deg);}
}
#fullscr{
position:fixed;
width:100%;height:100%;
top:0px;left:0px;
overflow:hidden;
transform-style:preserve-3d;
z-index:200;
pointer-events: none;
}
#scr1,#scr2,#scr3{
position:absolute;
top:-50%;left:-50%;
width:200%;height:200%;
background-image:
radial-gradient(#ffffff40 2%,#ffffff00 6%)
,radial-gradient(#ffffff80 0%,#ffffff00 5%);
background-position:0px 0px,200px 200px;
background-size:400px 400px,300px 300px;
}
#scr1{animation:kaiten1 20s linear infinite;}
#scr2{animation:kaiten2 20s linear infinite;}
#scr3{animation:kaiten3 20s linear infinite;}
</style>
<div id="fullscr">
<div id="scr1"></div>
<div id="scr2"></div>
<div id="scr3"></div>
</div>
仕組み
<div id="fullscr">
<div id="scr1"></div>
<div id="scr2"></div>
<div id="scr3"></div>
</div>
HTML要素として、id="fullscr"なdiv要素の中に３つのdiv要素が入っています。
この大枠のfullscrは、
#fullscr{
position:fixed;
width:100%;height:100%;
top:0px;left:0px;
位置がスクロールの影響を受けず（スクロールしても画面に追従）、また画面いっぱいを覆っています（width:100%;height:100%;）。
そして「overflow:hidden;」によって、その中身が画面をはみ出したとしてもスクロールバーが別途出る事はなく、「transform-style:preserve-3d;」でその内容を立体として扱い、「pointer-events: none;」によってクリック無効措置がとられています。
次に、中身となる３つのdivですが、
#scr1,#scr2,#scr3{
position:absolute;
top:-50%;left:-50%;
width:200%;height:200%;
background-image:
radial-gradient(#ffffff40 2%,#ffffff00 6%)
,radial-gradient(#ffffff80 0%,#ffffff00 5%);
background-position:0px 0px,200px 200px;
background-size:400px 400px,300px 300px;
}
↑ここで３つまとめて設定しています。
幅・高さともに200%（画面の２倍）、topとleftの指定で中心合わせをしています。
そして、３つの要素それぞれが、radial-gradientで描いた２つの白丸を持っており、その２つの白丸が繰り返し描画されています。
３つの要素、上記設定を共通設定として持ちつつ、アニメーションは個別に指定しています。
#scr1{animation:kaiten1 20s linear infinite;}
#scr2{animation:kaiten2 20s linear infinite;}
#scr3{animation:kaiten3 20s linear infinite;}
この３つのアニメーション、rotateYとrotateZで「縦軸を中心に回転しつつ、平面的な回転もしている」というものですが、
@keyframes kaiten1{
0%{transform:rotateY(0deg) rotateZ(0deg);}
100%{transform:rotateY(360deg) rotateZ(360deg);}
}
@keyframes kaiten2{
0%{transform:rotateY(120deg) rotateZ(120deg);}
100%{transform:rotateY(480deg) rotateZ(480deg);}
}
@keyframes kaiten3{
0%{transform:rotateY(240deg) rotateZ(240deg);}
100%{transform:rotateY(600deg) rotateZ(600deg);}
}
rotateY（縦軸を中心とした角度）の内容を120度づつずらしています。
これは、上から見ると、
↑こういう感じに重なっているものが同じ方向にぐるぐる回っている、という動きになります。
それと同時に、面自体の平面的な回転も行われているため、複雑に見える動きになっているんですね。
降ってはいないので、雪とは言えない…
むしろ「大掃除の時にでる、ほこりが大量に舞っている様子」の方が近い？？ｗ
といった感じになりました^^;
クリスマスまではまだ少し間がありますが、
自分も拝見していた他の方の昨年の今頃のコードを使われているのを久々に見て、懐かしさと今の自分ならどんなものが作れるか、試してみたくなったのです^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
