CSS Transformによるパララックススクロールエフェクト

CSS Transformによるパララックス

パララックススクロールエフェクトは、背景レイヤーを前景レイヤーよりも遅く動かし、深度の錯覚を作ります。CSS transformでJavaScriptなしにこれを実現できます。

CSS

.parallax-container {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
}

.parallax-layer {
  position: absolute;
  inset: 0;
}

.parallax-back {
  transform: translateZ(-1px) scale(2);
}

.parallax-front {
  transform: translateZ(0);
}

仕組み

1. コンテナにperspective: 1pxを設定し、3Dコンテキストを作成
2. 背景レイヤーをtranslateZ(-1px)で後方に押す
3. ビューアーから遠いため、スクロール時にゆっくり動いて見える
4. scale(2)で距離による縮小を補正

スケール補正の公式

perspective pでレイヤーをdピクセル後方に押した場合：

scale = (p + d) / p

perspective: 1pxとtranslateZ(-1px)の場合：

scale = (1 + 1) / 1 = 2

複数の深度レイヤー

.layer-far  { transform: translateZ(-2px) scale(3); }
.layer-mid  { transform: translateZ(-1px) scale(2); }
.layer-near { transform: translateZ(0); }

ブラウザの考慮事項

この純粋なCSSテクニックはすべてのモダンブラウザで動作します。ただし、コンテナのoverflow: hiddenはパララックスセクション内のスティッキーポジショニングに干渉する場合があります。具体的なレイアウトで十分にテストしてください。