スクロールズーム
スクロール量に応じて画像（グラデdivで代用）や見出しが拡大・縮小する。scrollイベント連動でscaleを変える。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
仕様書
- 向く場面
- スクロールで主役画像を縮小→拡大させる導入
- ズームで注目を集める1画面の演出
- 固定ステージ内での見せ場
- 避ける場面
- 本文の途中（読みながらの拡大は邪魔）
- 小さな画面で拡大後に枠から溢れる画像
- 構成要素
- スクロール容器
- 固定ステージ
- 画像
- 見出し
- 持っている状態
- 通常
- キーボード
Tab でスクロール容器へ（tabindex=0）、↑↓/PageDown でスクロール
- 支援技術
見出しは h2 で文字として読める。画像は div の見本。ステージは pointer-events:none で操作対象を持たない。reduced-motion では拡縮せず等倍で静止
- 動き
時間ベースのアニメはなし。進捗 0→0.5 で scale 1→0.5、0.5→1 で 0.5→1.6 に線形連動。見出しは 0.8 倍で追従し不透明度も連動
デザインの要点
- 前半（進捗 0〜0.5）で 1→0.5 に縮め、後半で 0.5→1.6 に拡げる。一度引いてから寄るので、拡大の到達点が強調される
- 拡大の上限 1.6 は 120px の画像が 192px になる値。300px のステージで overflow: hidden に切られない範囲で決める
- 見出しは画像の 0.8 倍＋0.2 で追従し、opacity も scale に連動させる。画像だけ動くと見出しが置き去りに見える
- ステージは pointer-events: none。拡大した画像がスクロール操作を奪わないようにする
コード（コピーして使えます）
<div class="szoom-root" tabindex="0">
<div class="szoom-spacer-top">↓ スクロール ↓</div>
<div class="szoom-stage">
<!-- .szoom-img は <img> タグに置き換えて使用可 -->
<div class="szoom-img"></div>
<h2 class="szoom-title">ZOOM</h2>
</div>
<div class="szoom-spacer-bot"></div>
</div>