Author: | chasmani |
---|---|
Views Total: | 18,485 views |
Official Page: | Go to website |
Last Update: | December 5, 2014 |
License: | MIT |
Preview:

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); }
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
-webkit-transform: translateZ(-1px);
is the cause in safari somehowhow to add multiple slides? very light n simple demo by the way thanx a ton