クリック時の波紋エフェクト
クリックした座標から円形の波紋が広がる、マテリアルデザイン風のリップル効果です。ボタンを押した瞬間に「ちゃんと反応した」という触感が生まれ、操作のフィードバックが分かりやすくなります。 仕組みは、クリック時の event からボタン内の相対座標を計算し、その位置を中心に小さな span を JavaScript で…
解説
クリックした座標から円形の波紋が広がる、マテリアルデザイン風のリップル効果です。ボタンを押した瞬間に「ちゃんと反応した」という触感が生まれ、操作のフィードバックが分かりやすくなります。
仕組みは、クリック時の event からボタン内の相対座標を計算し、その位置を中心に小さな span を JavaScript で生成します。あとは CSS の @keyframes が transform:scale で円を4倍まで拡大しながら透明にしていき、アニメーションが終わった span は setTimeout で取り除きます。overflow:hidden によって波紋がボタンの角の外へはみ出さないようになっています。
向く場面と調整ポイント
- 送信や決定など、押した実感がほしい主要ボタン
- アプリ風 UI のタップ操作
- カードやタイル状のクリック領域
波紋の色は span 生成時の rgba、広がる速さは rp-w の 0.6秒を変えれば調整できます。動きを抑えたい利用者のために、prefers-reduced-motion でアニメーションを止める配慮を加えると親切です。連打しても古い span は自動で消えるため、要素が残り続ける心配はありません。
使用例・適したシーン
- 購入完了・サブスク成約画面
- ゲーム要素のあるサイト
- イベント告知
よくある質問
波紋の色や速さは変えられますか
変えられます。色は JavaScript で span を作るときの rgba の値、広がる速さはキーフレーム rp-w の再生時間で調整します。明るい背景なら濃いめ、暗い背景なら白系が見やすいです。
波紋がボタンの外にはみ出しませんか
はみ出しません。ボタンに overflow:hidden が指定されているため、広がった円はボタンの角でカットされます。角丸の形にも自然に沿って表示されます。