CSS3 Parallax Scrolling Effect

Preview:

Description:

A smooth, cross-platform parallax scrolling effect implemented in pure CSS & CSS 3 transforms.

How to use it:

Add the parallax image & content to the webpage.

<div class="container">
  <div class="herounit">
    <img src="parallax.png" alt="Main Image" class="heroimg">
    <div class="title">
      Parallax Text Here
    </div>
    <div class="herotext">
      <h1>More Content Here</h1>
    </div>
  </div>
</div>

The main CSS to apply the parallax scrolling effect to the image & content.

.container {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100vh;
  -webkit-perspective: 1px;
  perspective: 1px;
  -webkit-overflow-scrolling: touch;
}
.herounit {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.heroimg {
  -webkit-transform: translateZ(-1px) scale(2);
  transform: translateZ(-1px) scale(2);
  position: relative;
 top: calc(((100vh - 51.54vw) / 4) * -2);
}