Simple Parallax Scrolling Effect with Pure CSS3

Preview:

Description:

Implement a simple parallax scrolling effect on your webpage using CSS3 transform and perspective properties.

Basic Usage:

The Html.

<div class="parallax">
  <div class="parallax_layer parallax_layer_back">
    <img class="backgroundImage" src="parallax.jpg"> </div>
  <div class="parallax_layer parallax_layer_base">
    <div class="title">Title</div>
    <div class="content">Content area</div>
  </div>
</div>

The core CSS3 for the parallax scrolling effect.

.parallax {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
  -webkit-perspective: 1px;
}

.parallax_layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.parallax_layer_base {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.parallax_layer_back {
  transform: translateZ(-1px);
  -webkit-transform: translateZ(-1px);
}

The CSS3 for depth correction.

.parallax_layer_back { transform: translateZ(-1px) scale(2); }

.parallax_layer_deep { transform: translateZ(-2px) scale(3); }