スクロール視差（パララックス）背景
背景画像とコンテンツが異なる速度でスクロールし、奥行きを感じさせる「視差（パララックス）」効果です。重い画像レイヤーを動かすのではなく、各セクションの背景の background-position-y を少しずつずらすだけの軽量実装になっています。
解説
背景画像とコンテンツが異なる速度でスクロールし、奥行きを感じさせる「視差（パララックス）」効果です。重い画像レイヤーを動かすのではなく、各セクションの背景の background-position-y を少しずつずらすだけの軽量実装になっています。getBoundingClientRect で要素が画面のどこにあるかを測り、係数（factor）を掛けてオフセットを計算し、スクロールのたびに位置を更新します。will-change:background-position で描画も滑らかにしています。
使いどころ
- トップのヒーローや区切りセクションの演出
- 写真を主役にしたランディングページ
- 長い縦スクロールに変化をつけたい時
動きの強さは setParallax(h,.3) の数値で調整します。大きくすると派手に動き、小さくすると控えめになります。スクロールイベントは passive:true を付けてスクロール性能を落とさないようにしています。注意点として、動きに酔いやすい人のために prefers-reduced-motion を見て効果を弱める、または止める分岐を足すと親切です。背景画像はサンプルのURLを自分の画像に差し替え、十分な解像度のものを使うとボケません。
使用例・適したシーン
- LP の演出強化
- 記事の読了率向上
- ストーリーテリング表現
よくある質問
視差の動きを強く（弱く）するには？
JavaScriptのsetParallax呼び出しの係数（例では0.3）を変更します。数値を大きくすると動きが派手に、小さくすると控えめになります。0.1から0.4あたりが扱いやすい範囲です。
動きが苦手な人への配慮はできますか？
できます。prefers-reduced-motionを検知して、その場合はスクロール処理を実行しない、または効果を弱める分岐を加えてください。酔いやすい利用者への基本的な配慮になります。