Creating Basic Parallax Effects using CSS3 Transforms

Category: Animation , CSS & CSS3 | August 17, 2015
Views Total:5,040 views
Official Page:Go to website
Last Update:August 17, 2015


Creating Basic Parallax Effects using CSS3 Transforms


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>

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); }

You Might Be Interested In:

Leave a Reply