センスだけに頼らない！ CSSとJSで作るパーティクル表現のテクニック - ICS MEDIA

パーティクルやラインアニメーションなど、ウェブページにちょっと見栄えのする表現を加えてみたくなることはありませんか？ ICS MEDIAのトップページや弊社採用サイトでもこうした表現を実装していますが、思った通りの演出をコードで表現するのはなかなか難しいものです。技術は分かっても「自分にはセンスがないから……」と諦めてしまっている人もいるかもしれません。 この記事では、簡単なパーティクル表現を題材に、効果的なアニメーション表現のためのテクニックを紹介します。サンプルコードはブラウザー標準のWeb Animations APIを使用して実装していますが、CSSアニメーションやGSAP等のライブラリを用いても同様の実装は可能です。 基本のパーティクル 例題とする基本のパーティクルを見てみましょう。クリックすると中央の星からパーティクルが放射状に広がるアニメーションが再生されます。 デモを別画面

[hedgehogx]

そういうのいいから必要な情報にさくっとたどり着けるシンプルなのください。キラキラ表現見るためにHP見に来るんじゃないんで。

[renos]

いいねとか押したときにフワンってなるの好き

[mayumayu_nimolove]

Flash全盛期に戻ってるな

[kijtra]

ActionScriptみがあるな(老人会)

[hirorinya]

学び

[stakaya]

パーティクルの使い方

[ku_marin]

かわいい

[candykebin]

　押したくなる

[spark7]

一、二個目くらいでちょうど良いのにどんどんトゥーマッチになってくな

[tk_musik]

そういうのもっと欲しいけど重くなるなら勘弁。

[otchy210]

RPG のランダムエンカウントはランダムに実装してはいけない。歩行距離が伸びるほどエンカウント率が上がるように実装しなさい。みたいな話だな。

[wsmfp327]

まばらに見える場合、実はランダムではない。ランダムは偏る。φ(.. ) ﾒﾓﾒﾓ

[north_korea]

いわゆる「コクのある乱数」というやつか