はじめまして、2020年6月に入社したくりちゃんです。
前職でもフロントエンドエンジニアとして約1年ほど、おもにLPたまにコーポレートサイトを制作していました。Webのアニメーションやインタラクションをもっと実装したいなと思い、ご縁があってLIGに入社することになりました。
See the Pen
Particle Rotation #03 by Hisami Kurita (@hisamikurita)
on CodePen.
プログラムで絵やアニメーションを作ったりすることが好きで、仕事でもプライベートでもよくCSS AnimationやCanvas 2D、three.jsを使って上記のようなものを作っています。個人で制作した作品はほとんどCodePenにあげているので、興味があれば見てみてください！
ということでLIGでの最初の記事は、上記のようなパーティクルアニメーションの作り方をご紹介したいと思います。実はこれ、ぜんぶCSSで実装しています。
パーティクルアニメーションとは？
パーティクルとは粒子のことです。粒子に対していろいろな動きや変化を与えることで、神秘的な演出や派手な演出、キュートな演出などさまざまな表現ができます。Web制作の分野でも、パーティクルアニメーションが実装されているサイトをよく見かけます。
先日LIGが制作したGREEN RIBBON様のコーポレートサイトにもパーティクルアニメーションが実装されています。こちらのパーティクルアニメーションはthree.jsとシェーダーという技術が使用されています。
今回ご紹介するサンプルは実務で使用するものではなく、プログラミング初心者の方でも実装しやすいようにCSS Animationを使用しています。パーフォマンスの観点でいうとCSS Animationで実装するのは好ましくなく、あくまでエンターテイメントとしての実装であることをご認識ください！
この記事がWebのアニメーションをより深く知るきっかけとなれば嬉しいです。
作り方
こちらの記事では基本的なCSS Animationのプロパティ情報は割愛させていただきます。CSS Animationについて、なにも知らないという方はネットで調べてみてください。直感的に動くプロパティばかりなので、簡単な動きならすぐに動かせるようになると思います。
「Animate.css」というライブラリの中身を見てみるのもオススメです。より、実践的なアニメーションのサンプルが載っています。
またHTMLとCSSの実装を効率化させるために、PugとSCSSを導入しています。
それでは、さっそく作っていきましょう。
回転させてみる
いきなり100%の完成形を目指すと大変なので、完成形までを細かく分解して制作していきます。まずは原点を中心に回転する要素を作ってあげます。
See the Pen
Blog-Cssanimtion-Particle #01 by Hisami Kurita (@hisamikurita)
on CodePen.
わかりやすいように擬似要素で補助線を引いてあげています。注意点としては、回転（rotate）と移動（translate）の関係性です。ラップした要素に回転（rotate）、その子要素に移動（translate）をかけることを意識します。
たとえば、回転（rotate）と移動（translate）の関係性が逆転したものになってしまうと、以下のように移動した要素から回転が起こってしまうので、注意してください。
See the Pen
Blog-Cssanimtion-Particle #02 by Hisami Kurita (@hisamikurita)
on CodePen.
要素を増やして、ランダム要素を強めてみる
次は要素の数を増やして、ランダム要素を強めてみます。ここから要素の数が一気に増えるので、効率化のためにPugとSCSSのfor文をフル活用しています。
See the Pen
Blog-Cssanimtion-Particle #03 by Hisami Kurita (@hisamikurita)
on CodePen.
SASSのビルドイン関数であるRANDOM関数を使用して乱数を生成しています。また、animation-delayは負の値を指定することで、アニメーション周期の指定した時間から直ちに開始されます。この性質を利用して、アニメーションの周期を設定しています。
animation: rotate linear infinite;
animation-delay: random(9999) + 50000 * -1ms;
animation-duration: random(50000) + 20000 + ms;HTMLはわかりやすいようにdivのネストを深くして、役割を明確化するようなコーディングをしています。
デザインをする
パーティクルアニメーションの基盤となる部分は作成できたので、デザインをつけていきます。ここからは各々好みが出るところなので、自由にデザインしてみてください。私の場合はかわいくてポップな感じが好きなので、背景をピンクにして、迫力を出すために要素数も200個。神秘的な感じも出したいと思います。
See the Pen
Blog-Cssanimtion-Particle #04 by Hisami Kurita (@hisamikurita)
on CodePen.
完成です！
背景はradial-gradientを使用して、opacityとbox-shadowで光を加えてみました。また、パーティクルはランダムに角度を変えて同じ向きにならないようにしています。
background: radial-gradient(ellipse at left top,#fdb7b9 20%,#de5d6f 50%,#b1414d);box-shadow: 0px 0px 10px 1px #f9f2ee;
opacity //アニメーションで透過率が変化するまとめ
いかがでしたか。パーティクルアニメーションは、値を少し変化させるだけでまったく違った演出を表現できます。皆さんも自分の表現を探ってみください。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
