[CSS]パララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアル

ページ上のコンテンツを複数のレイヤーで構成し、それぞれを異なるタイミングでスクロールさせるパララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアルを紹介します。

デモはパララックスの構造を可視化できるので、より分かりやすいと思います。

Pure CSS parallax scrolling websites

• パララックスのデモ
• パララックスの実装

パララックスのデモ

デモは非常にシンプルです。
Chrome, Safari, Firefox, Operaでご覧ください。

デモページ

少しスクロールすると、背景やエレメントが異なるタイミングでスライドします。

デモページをスクロールしたとこ

パララックスの構造の可視化は、左上の「Debug」をチェックします。

パララックスの実装

Step 1: HTML

divなどで各レイヤーを配置します。

<div class="parallax">
  <div class="parallax__group">
    <div class="parallax__layer parallax__layer--back">
      ...
    </div>
    <div class="parallax__layer parallax__layer--base">
      ...
    </div>
  </div>
  <div class="parallax__group">
    ...
  </div>
</div>

Step 2: CSS

パララックスの基本的なスタイルです。

.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back {
  transform: translateZ(-1px);
}

.parallaxはパララックスが生じるところで、perspectiveとheightを定義することで遠近感を生み出します。「overflow-y: auto;」でコンテンツ内の要素がスクロールすることを可能にし、子孫要素が固定されるのでパララックス効果の大切なポイントになります。

.parallax__layerはパララックス効果が適用されるコンテンツのレイヤーで、「back」と「base」はそれぞれz軸に沿って異なるスクロールをします。

Demo 1

3Dの変形を使うことでパララックス効果が生まれますが、サイズはオリジナルのままでこれを適用するにはscale()で調整します。

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

scaleの値は「(translateZ * -1) + 1 / perspective」となり、-2pxとした時はscale(3)になります。

Demo 2