スクロールストーリーテリング
左に章立てテキストが流れ、固定された右のビジュアルがスクロールの章に応じて切り替わる。IntersectionObserverで現在の章を検知。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
仕様書
- 向く場面
- 左の章立て文と右の固定ビジュアルの連動
- データや図の変化を文章で説明する記事
- 3〜5 章のストーリー
- 避ける場面
- スマホ幅で2カラムが成立しない画面
- 章ごとの文章が短く固定側が変わる前に通り過ぎる
- 構成要素
- スクロール容器
- 章（見出しと本文）
- 固定ビジュアル
- フレーム
- 持っている状態
- 通常
- キーボード
Tab でスクロール容器へ（tabindex=0）、↑↓/PageDown でスクロール
- 支援技術
章は h3 で読み上げの区切りになる。ビジュアルは絵文字＋キャプション文字。非アクティブ章は opacity で薄くするだけで読み上げ可能。reduced-motion では切替を即時に
- 動き
章は opacity 0.35→1 を 400ms、右のビジュアルは scale 0.85→1＋fade 400ms。文章の進行に絵が応答する
デザインの要点
- 文章の列がスクロールし、ビジュアルの列だけ sticky で固定する。両方固定すると章の進行が伝わらず、両方流れると絵と文が離れる
- 各章の min-height を容器（300px）に近い 260px にする。短いと threshold 0.5 に届く前に次章が入り、絵が飛ぶ
- 現在の章以外は opacity 0.35 で残す。消すと前後の章を目で辿れず、物語の位置が分からない
- 絵の切替は 400ms の scale 0.85→1＋fade。文を読む速さより速く、しかし瞬間切替でない時間にする
コード（コピーして使えます）
<div class="sty-root" tabindex="0">
<div class="sty-layout">
<div class="sty-text-col">
<div class="sty-chapter" data-ch="0">
<h3 class="sty-ch-title">第1章</h3>
<p class="sty-ch-body">旅のはじまり。<br>地平線の向こうへ<br>踏み出す一歩。</p>
</div>
<div class="sty-chapter" data-ch="1">
<h3 class="sty-ch-title">第2章</h3>
<p class="sty-ch-body">山を越え<br>川を渡り<br>新しい景色へ。</p>
</div>
<div class="sty-chapter" data-ch="2">
<h3 class="sty-ch-title">第3章</h3>
<p class="sty-ch-body">たどり着いた場所で<br>また新しい<br>旅が始まる。</p>
</div>
</div>
<div class="sty-visual-col">
<div class="sty-visual" id="sty-vis">
<div class="sty-frame sty-f0 active">
<div class="sty-icon">🌅</div>
<span class="sty-caption">夜明け</span>
</div>
<div class="sty-frame sty-f1">
<div class="sty-icon">⛰️</div>
<span class="sty-caption">峠</span>
</div>
<div class="sty-frame sty-f2">
<div class="sty-icon">🏡</div>
<span class="sty-caption">到着</span>
</div>
</div>
</div>
</div>
</div>