スタッガー出現
複数の要素が少しずつ時間をずらして現れる。リストやカード並びに躍動感が出る。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
仕様書
- 向く場面
- カード並び・特徴リストの登場
- 並びの順序を意識させたい一覧
- 1画面に収まる 3〜6 件の項目
- 避ける場面
- 数十件の長いリスト（最後まで待たせる）
- 検索結果など即読ませたい一覧
- 構成要素
- スクロールヒント
- リスト
- 項目
- 持っている状態
- 通常
- キーボード
スクロール（キーボードは ↑↓/PageDown で可）。操作要素は無い
- 支援技術
項目は ul/li で DOM 上に常時存在し読み上げ順は不変。一度出たら戻らない（observer を切断）。reduced-motion では全項目を最初から表示
- 動き
各項目 500ms ease、左 24px から入り 120ms ずつ遅らせる。一斉でなく順に出して並びの流れを示す
デザインの要点
- 遅延は 120ms 刻み。4 件で最後が 360ms 後に動き出す。60ms 以下だと一斉に見え、200ms 以上だと最後を待たせる
- 監視するのは ul 1 つで、li ごとには observe しない。リスト全体が 30% 見えたら順に出すほうが、並びの流れが揃う
- 移動は左から 24px。上下に動かすとスクロール方向と混ざり、順序の遅延が「引っかかり」に見える
- 一度出たら observer を切断する。再監視すると戻ったときに再び順番待ちが起きる
コード（コピーして使えます）
<div class="scroll-hint">↓ スクロール ↓</div>
<ul class="stagger">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>