Simple Parallax Scrolling Effect with Pure CSS3

Category: Animation , CSS & CSS3 | December 5, 2014
Author: chasmani
Views Total: 7,859
Official Page: Go to website
Last Update: December 5, 2014
License: MIT

Preview:

Simple Parallax Scrolling Effect with Pure CSS3

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

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

    Reply
    1. Aaron Shier

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

      Reply
  2. Nilanjan Roy

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

    Reply

Leave a Reply