JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="parallax-container">
  <div class="background">
    <img class="background__image" src="https://path/to/image.jpg" />
  </div>
  <div class="foreground">
    <div class="foreground__content">
      <h1>Oooo, parallax</h1>
    </div>
  </div>
</div>

CSS

.parallax-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: 8px;
  perspective-origin: 0%;
  display: flex;
}
.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateZ(0px);
}

.foreground {
  margin-top: auto;
  margin-bottom: 50px;
  transform-origin: 0;
  transform: translateZ(3px) scale(0.625);
}

.foreground h1 {
  font-size: 36px;
}