パララックススクロール
地面・木・山の眺めから、スクロールに連れて空・雲・太陽の眺めへカメラが大きくパンするダイナミックなパララックス。近い層ほど速く動いて奥行きが出る。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
仕様書
- 向く場面
- ヒーローで奥行きを出す風景・イラスト
- 近景と遠景の速度差で没入感を作る
- 章の導入の1画面
- 避ける場面
- 本文中の多用（酔いやすい）
- 画像が層に分かれていない1枚絵
- 構成要素
- スクロール容器
- 空・太陽・雲の層
- 山の層
- 手前の丘と木の層
- ヒント
- 持っている状態
- 通常
- キーボード
Tab でスクロール容器へ（tabindex=0）、↑↓/PageDown でスクロール
- 支援技術
装飾のみで読み上げる情報は「↓ スクロール」だけ。層は div で代替テキストを持たない。視差は前庭障害に負担なので reduced-motion では層を動かさず静止画にする
- 動き
時間ベースのアニメはなし。進捗に空 90px／山 180px／手前 300px の translateY を線形連動。近い層ほど速く動き奥行きを示す
デザインの要点
- 層の移動量は 空 90／山 180／手前 300px と手前ほど大きく。比率 1:2:3.3 が「近いものほど速い」奥行きになる
- ステージは sticky で固定し、スクロール量は下の 1,200px のフィラーで作る。層を fixed にすると容器内で使えない
- 各層は stage の高さ（300px）より大きく描いておく（空は 600px、山は 640px）。動かした先で下端に空白が出ない
- 視差はスクロール演出の中で最も酔いやすい。reduced-motion では transform を書かず 1 枚絵として見せる
コード（コピーして使えます）
<div class="par-root" tabindex="0">
<div class="par-stage">
<div class="par-layer par-bg">
<div class="par-sky"></div>
<div class="par-sun"><span class="par-sun-core"></span></div>
<div class="par-cloud par-c1"></div>
<div class="par-cloud par-c2"></div>
<div class="par-cloud par-c3"></div>
</div>
<div class="par-layer par-mid">
<div class="par-mtn par-mtn-far"></div>
<div class="par-mtn par-mtn-near">
<span class="par-snow"></span>
</div>
</div>
<div class="par-layer par-fg">
<div class="par-nearhill"></div>
<div class="par-tree par-t1"></div>
<div class="par-tree par-t2"></div>
<div class="par-tree par-t3"></div>
</div>
<div class="par-label">↓ スクロール</div>
</div>
<div class="par-filler"></div>
</div>