Simple Parallax Scrolling Effect with Pure CSS3

Category: Animation , CSS & CSS3 | December 5, 2014
Views Total:18,502 views
Official Page:Go to website
Last Update:December 5, 2014


Simple Parallax Scrolling Effect with Pure CSS3


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>

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

You Might Be Interested In:

3 thoughts on “Simple Parallax Scrolling Effect with Pure CSS3

  1. Aaron Shier

    Amazing! This is exactly what I was looking for. I have a problem in Safari though.

    The width of the div/image wont size right in my safari web browser. Is there a work around or possibly something wrong with my browser? I really like the pure CSS scrolling effects but I cant use it if Safari wont recognize the width of the initial div

    1. Aaron Shier

      -webkit-transform: translateZ(-1px); is the cause in safari somehow

  2. Nilanjan Roy

    how to add multiple slides? very light n simple demo by the way thanx a ton


Leave a Reply