どうもだよ、ちょびっとご無沙汰していたはやちだよ。
100記事到達を目前に、これまで書いた記事を振り返ってみた( ˘ω˘)☞三☞ｼｭｯｼｭｯ【はやちの黒歴史】
はやち
今年はじめてのLIGブログ。今回はノンjsで実装できるパーティクルアニメーションをご紹介いたします( ¨̮ )
実装方法
今回は、divを動かしたいぶん用意して、css3のanimationで実装してみます。手順は下記の通り。
html
divの中にsvgも入れ込んでみます。
<div class="particle-wrapper">
<div class="particle"></div>
<div class="particle">//svg省略</div>
//中にsvgも仕込んでみる
//particleのdivが２０個続く
</div>css
sassのfor文の中にanimationのキーフレームを書きます。
@for $i from 1 through 20 {
//この中に記述
}キーフレームアニメーションを設定。
transformの中はsassのrandam関数を使用して位置をランダムに指定します。
@keyframes particle-animation-#{$i} {
100% {
transform: translate3d((random(90) * 1vw), (random(90) * 1vh), (random(100) * 1px));
}
}paeticleのサイズ指定もsassのrandam関数を使用。
transformの初期値もrandamで設定します。
.particle:nth-child(#{$i}){
animation: particle-animation-#{$i} 50s infinite;
animation-direction:alternate;
$size: random(80) + 20 + px;
height: $size;
width: $size;
animation-delay: -$i * .2s;
transform: translate3d((random(120) * 1vw), (random(120) * 1vh), (random(100) * 1px));
}完成！
そしてできあがったものがこちらになります( ˘ω˘)☞三☞ｼｭｯｼｭｯ
まとめ
いかがでしたか(˘ω˘) こちらの実装はIE11にも対応可能です! canvasでの操作も可能ではありますが、お手軽さがあるcssでの方法が自分はよきかなと思った次第です。ではでは。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
