Pengertian Parallax CSS

Parallax hampir selalu menggunakan JavaScript dan, banyak kesalahan fatal atau lebih sering diterapkan dengan buruk yaitu memodifikasi DOM secara langsung di pegang, memicu reflow dan warna yang tidak perlu.

Sebelum kita masuk ke bagaimana efeknya bekerja, mari kita membuat beberapa markup barebone

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

Dan ini adalah CSS yang perlu di pahami kawan

.parallax__group {
  position: relative;
  height: 100vh;
  transform-style: preserve-3d;
}
.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);
}

Contoh nya, didalam setiap group parllax saya menulisakan height: 100vh,
Namun nilai sewenang-wenang dapat ditetapkan untuk setiap grup jika diperlukan. transform-style: preserve-3d mencegah browser meratakan auto dengan parallax__layer elements dan posisi position: relative ini mengunakan turunan / child parallax__layer elements di setting dengan position relative kedalam 1 group element.

There are no hard and fast rules for dealing with layering as implementations will differ between designs. It's much easier to debug layering issues if you can see how the parallax effect works - you can do that by applying simple transform to the group elements:

.parallax__group {
    transform: translate3d(700px, 0, -800px) rotateY(30deg);
}

Have a look at the following example - note the debug option!

Contoh Nya
Try it with groups

Sumber : https://keithclark.co.uk/articles/pure-css-parallax-websites/