[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

sponsors

top of page

©2018 coliss