CLOSE OPEN

ENT TECH LAB.

TAGSTAGS

jQueryを使用したパーティクル表現


パーティクルの動きについて

今回は桜の花びらのように左右にひらひらと動いて落ちるパーティクルを作りたいと思います。
パーティクルのX軸に対する動きはsin関数を使用します。
sin関数を使用する事で、左右を往復する動きが簡単にできます。

パーティクル本体は$(“.particle0,1,2,3….”)という要素名で個別に表示・管理し、
計算した値はsetInterval関数で一定時間毎にcssに反映します。




パーティクルをスプライトシートアニメーションで装飾

パーティクルの動きだけだと味気が無いので、
スプライトシートアニメーションでパーティクル本体を装飾します。

spliteSample.png

※このような画像を準備します

画像をパーティクル本体の要素にbackground-imageとして設定し、
background-positionを一定時間毎に切り替えるとこのような動きになります。

DEMO

パーティクルをWebサイトに反映

作成したパーティクルアニメーションを画面全体に反映します。

width:100%、height: 100%でウィンドウサイズを取得する為に、
下記の要素をbodyタグの直下に入れます



最後に

スマートフォンなどでは処理の関係で実装は厳しいですが、
PCでは画面に動きを与え、より映えた印象になります。
Webサイトの雰囲気にあったパーティクル表現をしてみてはいかがでしょうか。


※PCでもパーティクルのオブジェクトを増やしすぎると管理する値が多くなり、 処理が重くなるので注意。
関連記事
BACK TO TOP