スクロールで画像出現
スクロール量に応じて clip-path が開き、画像がだんだん現れる。scroll イベント連動の視覚演出。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
仕様書
- 向く場面
- スクロール量に比例して画像を開く演出
- 主役画像の登場をスクロールで操作させたい
- 戻すと閉じる可逆な見せ方
- 避ける場面
- 一度出したら戻したくない要素
- 本文テキスト（読める瞬間が限られる）
- 構成要素
- スクロール容器
- ヒント
- 画像枠
- キャプション
- 持っている状態
- 通常
- キーボード
Tab でスクロール容器へ（tabindex=0）、↑↓/PageDown でスクロール
- 支援技術
画像は div の見本（実装では img＋alt）。キャプションは文字で常時表示。開き具合は視覚のみ。reduced-motion では最初から全体を表示
- 動き
スクロール進捗に比例して clip-path が右から開く。追従の transition 50ms linear で段差をならす
デザインの要点
- 進捗は「容器の下端から画像の上端までの距離 ÷ 容器高さの 60%」。画像が容器の 6 割まで上がった時点で全開になり、中央に来る前に見せ切る
- clip-path は inset の右辺だけを % で動かす。width を変えると画像が縮んで見え、「現れる」でなく「伸びる」になる
- 追従に 50ms linear の transition を敷く。scroll イベントは飛び飛びに来るので、無いと開き方が段になる
- 戻すと閉じる可逆な演出。一度出したら戻したくない主役画像には、IntersectionObserver で一方向にする
コード（コピーして使えます）
<div class="scroll-root" tabindex="0">
<div class="spacer">↓ スクロール ↓</div>
<div class="reveal-wrap">
<!-- .reveal-img を <img> タグに置き換えて使用可 -->
<div class="reveal-img"></div>
<p class="caption">スクロールで出現</p>
</div>
<div class="spacer-bottom"></div>
</div>