紙吹雪セレブレーション
ボタンを押すと紙吹雪が舞い上がる成功演出。依存ゼロの自前パーティクルが重力で落下＋回転。連打しても枠内に収まる。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 目標達成・購入完了の一回きりの祝福
- 枠内に収めたい軽い演出
- 依存ゼロで置きたい成功フィードバック
- 避ける場面
- 頻繁に起きる操作の結果
- 動きに敏感な人向けの停止手段が無い画面
- 本文の上に粒を重ねて可読性を落とす
- 構成要素
- 紙吹雪の層
- メッセージ
- お祝いボタン
- 粒子
- 持っている状態
- 通常
- 押下中
- キーボード
Tab でボタンへ、Enter／Space で発射。連打しても粒は枠内に収まる
- 支援技術
紙吹雪の層は aria-hidden で読み上げ対象外。メッセージは静的テキスト。reduced-motion では粒を動かさず散らばった状態を 1.2 秒だけ見せる
- 動き
48 粒を rAF で 70〜110 フレーム（約 1.2〜1.8s）、重力落下＋回転、横壁で反発、最後 30 フレームでフェード。reduced-motion で静止
デザインの要点
- 粒はボタンの周り（横 20〜80%・縦 55〜75%）から上向きに撃ち、重力 0.25〜0.45 で落とす。中央一点から出すと噴水に見える
- 粒ごとに寿命 70〜110 フレームをばらつかせ、最後の 30 フレームで消す。一斉に消えるとスイッチを切ったように見える
- 横の壁で速度を半分にして跳ね返す。枠から出さないことで、本文の上に粒が乗って読めなくなるのを防ぐ
- reduced-motion では rAF を回さず、散らばった静止画を 1.2 秒だけ置く。祝う意味は残し、動きだけを取る
コード（コピーして使えます）
<div class="cf-wrap" id="cfWrap">
<div class="cf-stage" id="cfStage" aria-hidden="true"></div>
<div class="cf-content">
<p class="cf-msg" id="cfMsg">目標達成おめでとう！</p>
<button class="cf-btn" id="cfBtn">
<span>🎉 お祝いする</span>
</button>
</div>
</div>