クリックで紙吹雪が舞う演出
ボタンをクリックすると、色とりどりの小片が舞い散る祝祭演出です。クリック時にボタンの中心座標を getBoundingClientRect() で求め、そこから 40 個の span を生成。
解説
ボタンをクリックすると、色とりどりの小片が舞い散る祝祭演出です。クリック時にボタンの中心座標を getBoundingClientRect() で求め、そこから 40 個の span を生成。各片には CSS 変数 --dx--dy でランダムな飛散先を渡し、@keyframes で transform:translate と rotate(720deg) を効かせて回転しながら散らします。position:fixed と pointer-events:none で画面に重ねつつ操作の邪魔をせず、アニメ後は setTimeout で各片を remove() するため DOM にゴミが残りません。色は配列から循環で割り当てています。
使う場面
- 購入完了・サブスク成約・申込完了の成功画面
- 目標達成やバッジ獲得などゲーミフィケーション
- ボタンを押す体験に「ご褒美感」を足したいとき
紙片の数は for ループの 40、飛距離は --dx--dy の係数で調整できます。色は COLORS 配列を差し替えるだけ。大量の要素を生成するため、連打されても重くならないよう生成数を抑えるか間引くと安心です。動きが苦手なユーザーには prefers-reduced-motion を見て発火させない配慮を入れると、誰にとっても快適な演出になります。
使用例・適したシーン
- 購入完了・サブスク成約画面
- ゲーム要素のあるサイト
- イベント告知
よくある質問
紙吹雪の色や量はどう変えますか。
色はJavaScript上部のCOLORS配列を書き換えます。量はforループの繰り返し回数（初期40）で調整でき、増やすほど豪華に、減らすほど軽くなります。飛ぶ距離は--dxと--dyに掛けている数値で変えられます。
クリック以外のタイミングで発火できますか。
できます。今はクリックのイベントリスナーで起動していますが、その中の生成処理を関数にまとめ、フォーム送信完了やページ表示時など好きなタイミングで呼べば同じ演出が出せます。