Creating Basic Parallax Effects using CSS3 Transforms

Preview:

Description:

A pure CSS solution to create the familiar parallax scroll effect on background images using CSS3 2D transforms (translate and scale).

How to use it:

Create a container that has a parallax background images.

<section id="parallax">
  <div class="back">
    <h2>Parallax Container</h2>
  </div>
</section>

The core CSS styles.

section {
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
  transform-style: inherit;
  overflow: hidden;
}

section .back {
  width: 100%;
  height: 100%;
  background-position: center center;
  transform: translateZ(-2px) scale(3);
}

Add a background image to the container.

#parallax .back { background-image: url(bg.jpg); }