広告の限界を超える|セールス
広告の限界を超える|セールス
2019.02.05
#179
それいけ!フロントエンド

ノンjsで「パーティクルアニメーション」を実装する方法

はやち

どうもだよ、ちょびっとご無沙汰していたはやちだよ。

今年はじめてのLIGブログ。今回はノンjsで実装できるパーティクルアニメーションをご紹介いたします( ¨̮ )

実装方法

今回は、divを動かしたいぶん用意して、css3のanimationで実装してみます。手順は下記の通り。

html

divの中にsvgも入れ込んでみます。

<div class="particle-wrapper">
<div class="particle"></div>
<div class="particle">//svg省略</div>
//中にsvgも仕込んでみる
//particleのdivが20個続く

</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制作について相談してみる!

n u l l