Creating Basic Parallax Effects using CSS3 Transforms

Author: adam-m-denny
Views Total: 4,936 views
Official Page: Go to website
Last Update: August 17, 2015
License: MIT


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

See also  Create A Simple Fashion Clock with Javascript and CSS3

Leave a Reply

Your email address will not be published. Required fields are marked *