本文へスキップ

スタガーの波(距離順)

グリッドのどこかを押すと、押した位置からの距離に比例した遅延で周りのタイルが順に膨らみ、波紋のように広がる。一方向のスタガーとの違いは「起点が操作位置」なこと。

プレビュー

クリック

操作クリック/タップで動きます。

デザインの要点

  • 遅延は index 順でなく「起点からの距離 × 単位時間」で計算する。押した場所から広がるので、操作と反応が結びつく
  • 1 タイルの動きは 400ms 程度でも、遅延の合計で全体は 1 秒近くになる。遠いタイルほど淡く小さくして、待たせない
  • 波は「押した確認」の演出なので、ボタン連打で重ねてもキューに溜めない。前の波は途中で捨てて新しい波を優先する

コード(コピーして使えます)

<div class="sw-wrap">
  <div class="sw-grid" id="swGrid" aria-label="タイルを押すと波が広がる"></div>
  <p class="sw-read" id="swRead">どこかのタイルを押してください</p>
</div>

タグ

同じカテゴリ「モーション・トランジション」のほかのパーツ

関連パーツ