パララックス見出し（スクロール連動）
スクロールに合わせて背景だけが本文よりゆっくり動く、映画的なパララックス見出しです。短い JavaScript が scroll イベントで現在の window.scrollY を読み、その半分の量を背景要素の transform:translateY() に渡します。
解説
スクロールに合わせて背景だけが本文よりゆっくり動く、映画的なパララックス見出しです。短い JavaScript が scroll イベントで現在の window.scrollY を読み、その半分の量を背景要素の transform:translateY() に渡します。背景の移動量を本文より小さくすることで遠近が生まれ、奥行きのある立体感になります。背景は上下を -30% ずつはみ出させ、ずれても余白が見えないようにしてあります。
活用シーン
ブランドサイトのヒーロー、特集記事の冒頭、写真を主役にしたランディングページなど、最初のひと画面で世界観を伝えたい場面に向きます。実画像を背景に差し替えると、いっそう没入感が高まります。
- 背景：
linear-gradientの部分をurl()の写真に変えるだけで実写パララックスになります。 - 動く量：JS の係数
0.5を小さくすると控えめ、大きくすると大胆な視差になります。 - 性能と配慮：
will-change:transformで描画を滑らかにしています。負荷を抑えるならrequestAnimationFrameで間引き、prefers-reduced-motion時は視差を切ると親切です。
使用例・適したシーン
- LP の演出強化
- 記事の読了率向上
- ストーリーテリング表現
よくある質問
背景を実際の写真にできますか
できます。背景要素の linear-gradient を url() の画像指定に置き換えてください。background-size を cover にしておくと画面に合わせて引き伸ばされ、視差がそのまま効きます。
視差の強さはどこで変えますか
JavaScript で scrollY に掛けている係数 0.5 を変えます。値を下げると背景の動きが控えめになり、上げると本文とのずれが大きく大胆な演出になります。