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

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

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

はやち
はやち フロントエンドエンジニア / 林 佳代子

フロントエンドエンジニアのはやちです( ˘ω˘)☝ 以前までは顔隠しておりましたが思い切ることにしました…。 相変わらず顔文字乱舞ですがブログもコーディングも楽しくやっていこうと思います✌(´ʘ‿ʘ`)✌ 今までに作ったDemoたちはGithubにて公開しております!よろしければ是非( ˘ω˘)☞三☞シュッシュッ

このメンバーの記事をもっと読む
それいけ!フロントエンド | 213 articles
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL