パララックススクロール背景
これはスクロールに合わせて背景がゆっくりずれて奥行きを感じさせるパララックス演出です。ヒーロー内の para-hero__bg をグラデーション背景にし、 scroll イベントで getBoundingClientRect() から要素の位置を取り、その割合を translateY に反映させて前面の文字より背景…
解説
これはスクロールに合わせて背景がゆっくりずれて奥行きを感じさせるパララックス演出です。ヒーロー内の para-hero__bg をグラデーション背景にし、scroll イベントで getBoundingClientRect() から要素の位置を取り、その割合を translateY に反映させて前面の文字より背景を遅く動かします。イベントには passive:true を付けてスクロールの滑らかさを保ち、will-change:transform で変形を予告しています。背景自体も @keyframes でグラデーションの位置を循環させ、静止していても柔らかく揺らぎます。
使う場面
- サイト冒頭のヒーローに動きと奥行きを足したいとき
- ブランドの世界観をビジュアルで印象づけたい紹介ページ
- 区切りのセクション背景にさりげない動きを加えたいとき
ずれの強さは pct に掛ける数（既定は 40）で調整でき、大きくするほど大胆に動きます。背景は実写画像に差し替えても成立します。注意点として、酔いやすい利用者のために prefers-reduced-motion で動きを止める分岐を入れると安全です。背景は inset:-40px で少し外へはみ出させ、ずらしても縁に隙間が出ないようにしてある点も実装の工夫です。
よくある質問
背景のずれ幅を強く（または弱く）したいです。
スクロール処理の中で pct に掛けている数値（既定は 40）を変えてください。大きくすると背景の動きが大胆になり、小さくすると控えめになります。
スマートフォンでも重くなりませんか？
scroll イベントに passive を付け、変形には transform を使っているため比較的軽い実装です。それでも気になる場合は、動きを止める設定の利用者向けに分岐を足すと安心です。