スクロール演出（応用）
スクロールストーリーテリング
左に章立てテキストが流れ、固定された右のビジュアルがスクロールの章に応じて切り替わる。IntersectionObserverで現在の章を検知。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
コード（コピーして使えます）
<div class="sty-root">
<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>