要素ごとにスクロール速度を変更する - 視差効果パララックス (parallax) の実装 - CSS

CSS Scroll Driven Animaion を利用して要素ごとにスクロール速度を変化させ、視差効果を実装するコードを紹介します。

概要

Webページで縦にスクロールをすると、スクロール通常のスクロールより速い速度でスクロールする要素が表示され、ほかの要素を追い抜く効果を表現しているページがあります。
この記事では、CSS Scroll Driven Animaion を利用して要素ごとにスクロール速度を変え、視差効果を実装します。

実装例1:シンプルな例

コード

以下のHTML,CSSファイルを作成します。

ScrollParallax.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="ScrollParallax.css" />
</head>
<body>
  <div class="Content">1</div>
  <div class="Content">2</div>
  <div class="Content">3</div>
  <div class="Content">4</div>
  <div class="Content">5</div>
  <div class="Content">6</div>
  <div class="Content">7</div>
  <div class="Content">8</div>

  <div class="Frame1">
    <img class="Frame1Image" src="img02.png" />
  </div>
  <div class="Frame2">
    <img class="Frame2Image" src="img03.png" />
  </div>
</body>
</html>

ScrollParallax.css

body {
  height:1600px;
}
.Frame1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  animation: animation1 linear forwards;
  animation-timeline: scroll();
}
.Frame2 {
  position: absolute;
  left: 64px;
  top: 0;
  width: 256px;
  animation: animation2 linear forwards;
  animation-timeline: scroll();
}

.Frame1Image {
  width: 100%;
}
.Frame2Image {
  width: 100%;
}

.Content {
  height:200px;
  border:2px solid #808080;
}


@keyframes animation1 {
  0% {
    transform: translateY(800px);
  }

  100% {
    transform: translateY(-100px);
  }
}

@keyframes animation2 {
  0% {
    transform: translateY(1400px);
  }

  100% {
    transform: translateY(-1200px);
  }
}

画像は以下の画像を用意します。

解説

Frame1, Frame2 が通常のスピードと異なる速度でスクロールする要素です。
2つの要素の位置は position:absolute;を指定し、絶対位置で指定します。
y座標の初期値は2つとも top:0 としますが、keyframes の指定で、Frame1 は 800px の位置、Frame2 は 1400px の位置を開始位置としています。
Frame1,Frame2 には animation-timeline: scroll(); animation: animation[n] linear forwards; を指定し、スクロールすると、スクロール位置に応じて、 Frame1にはkeyframes animation1 の値が、Frame2にはkeyframes animation2 が反映される動作にします。

animation1 と animation2 では開始位置と終了位置が異なるため、2つの要素のスクロール速度が異なる動作になります。