クリップreveal
画面に入ると画像が左から右へ開くように現れる。clip-pathを使った上質な登場。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
仕様書
- 向く場面
- 写真・ビジュアルの上質な登場
- 画像を左から右へ「開く」見せ方
- 1〜2 枚の主役画像
- 避ける場面
- ギャラリーの全画像（重く、待たせる）
- テキストブロック（clip で読めない時間ができる）
- 構成要素
- スクロール容器
- ヒント
- 画像枠
- 持っている状態
- 通常
- キーボード
Tab でスクロール容器へ（tabindex=0）、↑↓/PageDown でスクロール
- 支援技術
画像は div で代替テキストを持たない見本（実装では img＋alt）。可視率 25% で開き、以後は監視を外す。reduced-motion では最初から全体を表示
- 動き
clip-path inset 右 100%→0 を 1s ease-in-out(.7,0,.2,1)。左から右へ開いて現れる
デザインの要点
- inset(0 100% 0 0) → inset(0) で右辺だけを動かす。左から右へ「開く」向きは読む方向と同じで違和感が無い
- 1 秒・(.7,0,.2,1) の ease-in-out。開き始めをためて中盤を速くすると、幕が引かれるような質感が出る
- 可視率 25% で開き始める。50% まで待つと画像の上半分が空白のまま止まって見える
- opacity でなく clip-path なので画像の色は最初から本物。フェードと違い「薄い偽色」の時間が無い
コード（コピーして使えます）
<div class="clip-scroller" tabindex="0">
<div class="scroll-hint">↓ スクロール ↓</div>
<div class="clip-wrap">
<!-- .clip-img を <img> に置き換えて使う -->
<div class="clip-img"></div>
</div>
</div>