Tutorial: Simple CSS3 Parallax Effect

What is Parallax?

What is Parallax?

The term parallax first came from the visual effect of 2D side-scrolling style video games. They used different background images, moving at different speeds to create the illusion of depth. This was usually achieved by making the background of the game move slower than the foreground, making it seem further away. This same concept applies to parallax website design in which the background of the website moves at a different speed as the rest of the page when scrolling. This allows for an impressive visual effect that allows for a huge variety of creative applications.

In this tutorial we are going to learn how to implement a simple parallax scrolling effect, using the CSS3 ‘transform’ and ‘perspective’ properties.

Parallax HTML

The basic HTML which will make up the overall parallax effect



<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>


Parallax CSS

This is the core CSS3 needed for a basical 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);
}

* {
margin:0;
padding:0;
}

.title {
position:absolute;
left:10%;
top:30%;
color:white;
font-size:300%;
}

.backgroundImage {
width:100%;
height:auto;
}

.content {
margin-top:100vh;
width:100%;
height:800px;
background-color:#414A50;
color: #fff;
}

Additional CSS3 to fix depth perception

.parallax_layer_back {
transform:translateZ(-1px) scale(2);
}

.parallax_layer_deep {
transform:translateZ(-2px) scale(3);
}

Need some help? Get in touch.

DK Web Design - Logo

What I Do


Hi, I'm Dan...I specialise in creating bespoke marketing information sites and small e-commerce (shop) websites. Tailored to marketing or selling your products or services successfully online.
Web Design - Tailored To You

Latest Tutorials

Latest Posts

%d bloggers like this: