タッチリップル付きリスト
Android 型のリスト。押した位置から波紋が広がって「どこを押したか」を返す。スクロール中は指が動いた量で判定してリップルを出さず、タップだけに反応する。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 波紋は押した点から始める。中央から出す波紋は「押した」ではなく「何か起きた」に見えてしまう
- 指を置いてから 80ms 待ち、その間に 8px 以上動いたら出さない。スクロールのたびに光るリストは目障り
- 波紋の色は文字色を 12〜16% の透明度で。強い色にすると背景ごと塗り替えたように見える
- リップルは overflow:hidden の行の中で描く。行の角丸からはみ出すと安っぽくなる
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<div class="trl-phone">
<header class="trl-head"><h2 class="trl-title">連絡先</h2><span class="trl-meta" id="trl-meta">12 人</span></header>
<div class="trl-scroll" id="trl-scroll" tabindex="0" aria-label="連絡先一覧（スクロール）">
<ul class="trl-list" id="trl-list"></ul>
</div>
<p class="trl-status" id="trl-status" role="status" aria-live="polite">タップすると選択、スクロール中は波紋が出ません</p>
</div>