泡・バブル
水底から泡が揺らぎながら立ち上る。タップした泡はすぐに弾けて波紋状のリングを残す。画面上端まで届いた泡も一定確率で自然に弾ける。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 水・飲料・清潔感のある商品 LP
- 明るい配色の待機・演出面
- タップで反応する軽い遊び
- 避ける場面
- 本文の背景（泡が文字と重なる）
- 落ち着いた・厳粛なトーンの画面
- 情報をアニメだけで伝える場面
- 構成要素
- 水面（canvas）
- 泡（ハイライト付き）
- 破裂のリング
- 操作ヒント
- 持っている状態
- 通常
- キーボード
マウス・タッチ専用（泡をタップで弾く）。装飾で代替操作は不要
- 支援技術
canvas は aria-hidden の装飾。reduce 設定では泡を半減して上昇を止め、タップで弾けたときだけ描き直す。visibilitychange で停止
- 動き
泡は 16〜40px/s で上昇し sin で揺れる。タップで破裂しリングが 2.2倍まで広がり約0.33s で消える。上端到達で50%が自然に弾ける
デザインの要点
- 泡は輪郭・薄い面・左上のハイライトの3描画で作る。輪郭だけだと輪、面だけだと水滴に見える
- 当たり判定は半径 +4px で手前の泡から探す。小さい泡は見た目どおりの判定だと指で当てられない
- 破裂のリングは 2.2 倍へ 0.25/frame で急拡大し 0.33s で消す。ゆっくり広がると波紋になってしまう
- 上端で弾けるのは半分だけ。全部弾けると上端が常に光り、視線がそこに固定される
コード（コピーして使えます）
<div class="bb-wrap">
<canvas class="bb-canvas" aria-hidden="true"></canvas>
<p class="bb-hint">タップで泡がはじける</p>
</div>