004_parallax
背景レイヤーと前景コンテンツにスクロール速度の差を
つけることで、奥行き（視差）を感じさせる実装です。このデモでは
3 種類のパターンを並べています ——
(1) CSS の図形だけで作る視差、
(2) 1 枚の画像を背景に動かす視差、
(3) 複数レイヤーを別々の速度で動かす多層視差です。
対応ブラウザでは animation-timeline: view() によって、
各レイヤーがビューポートを通過する進捗に連動して動きます
（JS なし・CSS だけ）。この機能に未対応のブラウザ
では、scroll イベントと
requestAnimationFrame を使った軽量な JS が同じ
translateY を計算してレイヤーを動かします
（フォールバック）。OS の「視差効果を減らす」設定が有効な場合は、
視差を完全に無効化して通常の表示にします。下方向にスクロールして
奥行きを確認してください。
パターン 1: 図形だけの視差
画像を一切使わず、CSS のグラデーションと半透明の円 だけで作った視差です。背景の図形が前景の見出しよりゆっくり動くこと で「奥」にあるように感じられます。素材がなくても視差は作れます。
パターン 2: 画像背景の視差
1 枚の画像を背景に敷き、それを丸ごと視差で ゆっくり動かすパターンです。前景のテキストは通常の速度で流れる ため、画像との間に視差が生まれます。
パターン 3: 多層の視差
複数のレイヤーを違う速度で動かして奥行きを出す パターンです。遠景の画像はゆっくり、手前の図形は速く動きます。 「遠いものほどゆっくり動く」ことで段階的な立体感が生まれます。
ここがページの終端です。図形だけの視差・画像背景の視差・多層の視差の 3 パターンで、背景が前景より遅れて動いていたことを確認できたでしょうか。 特に多層パターンでは、遠景の画像と手前の図形が別々の速度で動いて いました。十分なスクロール量を確保するため、各セクションは縦に長く 取っています。