Parralax

Basic parallax implementation

by pphheerroonn

HTML

<div class="parallax">
  <div class="parallaxLayer parallaxBottomLayer">
  <h1>Underlay</h1>
  </div>
  <div class="parallaxLayer parallaxN1Layer">
  <h1>Overlay</h1>
  </div>
</div>

CSS

.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallaxLayer {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}
.parallaxN1Layer {
  transform: translateZ(-1px);
  transform: translateZ(-1px) scale(2);//The scale factor can be calculated with 1 + (translateZ * -1) / perspective. For example, if our viewport perspective is set to 1px and we translate an element -2px along the Z axis the correction scale factor would be 3
}
.parallaxBottomLayer {
  transform: translateZ(0);
}