こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回は「クリックした場所から花びらが舞い散るエフェクト」をご紹介します。
マウスクリックに合わせて花びらがひらひらと落ちる演出は、季節イベント（春・桜・お祝いサイト）やランディングページ、演出にこだわったポートフォリオなどで効果的に使えます。
特に「サイトを開いたときの驚き」「操作したときの心地よさ」をプラスできるので、UX向上にもおすすめです。
CSSで花びらの見た目を定義し、JavaScriptでクリック位置を取得してアニメーションを生成します。ここでは基本コードと応用アイデアをご紹介します。
クリック位置に花びらを生成するコード
以下のコードをHTMLファイルに貼り付けるだけで、クリックした場所から花びらが舞い散るエフェクトを実装できます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
クリックごとに複数の花びらがランダムな角度で生成され、下方向に落ちていきます。
応用：花びらのサイズや舞い方をランダム化
もう少し自然に見せたい場合は「サイズ」「落下スピード」「横揺れ」をランダムに設定するとよりリアルになります。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このように translateX を追加すると、風に流されるように左右に揺れながら落ちる動きを再現できます。
まとめ
クリックした場所に花びらが舞い散るエフェクトは、イベント演出や遊び心のあるUIを作りたいときに非常に有効です。
アニメーションの速度や色、形を変えることで、桜・バラ・紅葉など様々なシーンに応用できます。
ぜひ自分のサイトでも取り入れてみてください。
