How to add parallax effect on your website

Published on : April 27, 2026

Author: wahid

Category: Uncategorized

In this tutorial I describe how I add parallax effect in my website. What type of problem I faced and how I manage that problem. Before add parallax effect on website you have to know basic things about Html, Css and Javascript.

Follow the steps

Step 1

Create a simple html file. I make a simple html file and save it as index.html
Code example

[sourcecode]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rare Snakes</title>
</head>

<body>
</body>
</html>
[/sourcecode]

Step 2

Now add this portion into body.
Code example

[sourcecode]
<section id="section1" data-type="background" data-speed="10"></section>
[/sourcecode]

By this code I am going to add my first image as a background. Here is an id section1. I write code for id in css file. Data-type and data-speed is property of html 5. Here data-speed is 10 which used for background moving speed later.

Step 3

Now I am going to attach a css file. I make a css file named as style.css Look at the code.
Code example

[sourcecode]
#section1 {
background: url(../image/green-tree-python.png) no-repeat fixed;
height: 450px;
margin: 0 auto;
width: 100%;
position: relative;
background-size:cover;
}
[/sourcecode]

This is css code for section1 id. Here I attach my first image as a background. I also add some extra css for my page orientation. You can easily understand that. I will attach full css file at the finishing of tutorial.

Step 4

Now attach my css file with index.html. Attach the following line inside tag

[sourcecode]
<link rel="stylesheet" type="text/css" href="css/style.css" />
[/sourcecode]

Now take a look of my code output.

Step 5

Now I am adding related content about image 1. I also attached font css into the head portion for my font.
Code example

[sourcecode]
<link rel="stylesheet" type="text/css" href="Aleo font/stylesheet.css" />
<div id="description1">
<div class="wrap">
<h3>Green Tree Python</h3>
<p>Green tree pythons are definitely one of the reptile hobby’s rising stars. As their common name suggests, these snakes spend a great deal of time in trees. But they are not always green. They come in a wide array of colors found in both wild and captive-bred designer forms. Only one recessive morph, the albino, currently exists.</p>
</div>
</div>
[/sourcecode]

Step 6

Add some css code for content orientation
Code example

[sourcecode]
#description1{
width:100%;
position::relative;
float::left;
background::#E0E0E0;
padding:65px 0px 65px 0px;
}
#description1 h3{
font-family:aleobold;
font-size:30px;
color:#505050;
line-height:25px;
padding-bottom:20px;
}
#description1 p{
font-family:aleoregular;
font-size:16px;
color:#097516;
line-height:25px;
text-align:justify;
}
[/sourcecode]

Now take a look on output.

Step 7

Now I add another image and following content like as before.
HTML code example

[sourcecode]
<section id="section2" data-type="background" data-speed="10"></section>
<div id="description2">
<div class="wrap">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
[/sourcecode]

CSS code example

[sourcecode]
#section2 {
background: url(../image/rat-snake.png) no-repeat fixed;
height: 450px;
margin: 0 auto;
width: 100%;
position: relative;
background-size:cover;
}
#description2{
width:100%;
position::relative;
float::left;
background::#E0E0E0;
padding:65px 0px 65px 0px;
}
#description2 p{
font-family:aleoregular;
font-size:16px;
color:#93150c;
line-height:25px;
text-align:justify;
}
[/sourcecode]

Step 8

Now I am going to add javascript code for parallax effect. I make it custom as my design. At first I create a javascript file and save it as script.js
Normally in parallax effect your all background move during scroll. But I make it custom for me. When I scroll on first portion then only first portion background will move. When you reach on second portion then your second portion background will start moving. For this functionality I initialize some javascript variable in my script.js file and calculate each section height. If you have basic knowledge on javascript you can easily understand the code.
But if you don’t want those custom functionality then you can just add this code for parallax effect into scroll function.

[sourcecode]
$(window).scroll(function(e) {
var yPos = -($(window).scrollTop() / $("#section1").data(‘speed’));
var coords = ‘0 ‘+ yPos + ‘px’;
$("#section1").css({ backgroundPosition: coords });
});
[/sourcecode]

Now take a look on my html, css and javascript code and I think you can easily understand the code.

From here you can download my full code
https://dev.cybernetikz.com/wp-content/uploads/2015/01/parallax.zip