こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回は遊び心のあるインタラクション演出として、ページを開いた瞬間に「ポップコーンがポンポン弾ける」ように飛び散るアニメーション をご紹介します。
「普通のWebサイトじゃつまらない！」と思ったときに、このような小さな遊び要素を加えるだけで、訪問者の印象はガラッと変わります。
飲食店や映画館、イベントサイトなど、テーマに合わせた「仕掛け」として導入すると強烈に記憶に残るサイトに仕上がります。
今回は CSSアニメーション＋JavaScript を使って、実際にポップコーンが弾けるような動きを再現していきましょう。
ポップコーン演出の基本仕組み
演出の基本的な流れはシンプルです。
- ページを開いたタイミングでJavaScriptを実行
- ランダムな位置に「ポップコーンの粒」を生成
- CSSアニメーションで弾けるようにスケール＆ジャンプ
- 一定時間後に消える
この流れを繰り返すことで、「ポンポン！」とリズムよく弾けるポップコーンを表現できます。
サンプルコード
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. - 音声を追加して「ポンッ！」と鳴らす
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
特に「クリックで増やす」＋「音声」まで組み合わせると、遊び心満点の演出になります。
まとめ
ページを開いた瞬間に「ポップコーンが弾ける」ような演出は、見る人の心をワクワクさせる遊び心のあるギミックです。
ほんの数行のCSSとJavaScriptで実装できるので、ぜひあなたのWebサイトにも取り入れてみてください。
satokotadesignキャンペーン実施中！
