こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回はWeb演出にぴったりな「爆発的に広がるパーティクルアニメーション」をご紹介します。
ボタンをクリックした瞬間、色とりどりの粒子が四方八方に広がる演出は、まるでゲームや映画のワンシーンのよう。
ユーザー体験を盛り上げるインタラクションとして、Webサイトに取り入れてみるのはいかがでしょうか？
今回の実装はJavaScript＋Canvasを使って簡単に作れます。ぜひコピペで試してみてください。
完成デモ
クリックすると花火のようにパーティクルが広がります。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
応用：星型に変更
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
応用：ハート型に変更
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
応用アイデア
- ボタンクリックの代わりに「スクロールイベント」で爆発
- 色をブランドカラーに統一してWeb演出に活用
- ゲームサイトやイベント告知に導入
まとめ
爆発的に広がるパーティクルアニメーションは、驚きと楽しさを演出できる効果です。ユーザー体験を向上させるインタラクションとしてぜひ試してみてください。
satokotadesignキャンペーン実施中！
