スクロール連動タイムライン
スクロールで各ステップ（年表/手順）が順に点灯する。IntersectionObserver で各要素を検知して色付け。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
仕様書
- 向く場面
- 年表・手順を順に点灯させて進行を示す
- 3〜6 ステップの流れの説明
- 読み進めた位置を視覚で強調
- 避ける場面
- ステップが多い長大な年表（点灯が単調）
- 順序の無い項目
- 構成要素
- スクロール容器
- 縦線
- 節目の点
- ラベル
- 本文
- 持っている状態
- 通常
- キーボード
Tab でスクロール容器へ（tabindex=0）、↑↓/PageDown でスクロール
- 支援技術
ol/li の順序リストで読み上げ順＝時系列。点灯は opacity と点の色で示し、ラベル文字は常時読める。reduced-motion では点灯を即時に切り替える
- 動き
到達した項目が opacity 0.35→1 を 500ms、点の色 400ms ease。順に点灯し一度点いたら消えない
デザインの要点
- 未到達の項目は opacity 0.35 で「見えるが薄い」。0 にすると先の手順が読めず、全体が何段あるか分からない
- 点灯は加えるだけで消さない（isIntersecting false で外さない）。戻ると消える年表は「進んだ」感覚が残らない
- IntersectionObserver の root に内側のスクロール容器を渡す。省略するとビューポート基準になり、容器内では発火しない
- 縦線と丸の中心は px で合わせる（線 x=29px、丸は margin-left −19px）。1px ずれると全段で目立つ
コード（コピーして使えます）
<div class="scroll-root" tabindex="0">
<div class="spacer">↓ スクロール ↓</div>
<ol class="timeline">
<li class="tl-item">
<div class="tl-dot"></div>
<div class="tl-body">
<span class="tl-label">Step 1</span>
<p class="tl-text">アイデアを出す</p>
</div>
</li>
<li class="tl-item">
<div class="tl-dot"></div>
<div class="tl-body">
<span class="tl-label">Step 2</span>
<p class="tl-text">プロトタイプを作る</p>
</div>
</li>
<li class="tl-item">
<div class="tl-dot"></div>
<div class="tl-body">
<span class="tl-label">Step 3</span>
<p class="tl-text">ユーザーに届ける</p>
</div>
</li>
<li class="tl-item">
<div class="tl-dot"></div>
<div class="tl-body">
<span class="tl-label">Step 4</span>
<p class="tl-text">フィードバックを得る</p>
</div>
</li>
</ol>
<div class="spacer-bottom"></div>
</div>