Create A Simple Parallax Effect Using HTML & CSS

179 Views

To make a web page html and css are must. HTML and CSS allow you to create a magnificent style on your web page. If you can handle them nicely, you can find out amazing effects. Parallax is one of them.

Hi guys, welcome back to anupdebnath.info. In this video i am gonna show you –

Apply HTML Code

First step :: At first we need to create the basic structure of HTML on our code editor. Here is how it looks like.

<!DOCTYPE html>
<html>
<head>
	<title>Your Title</title>
</head>
<body>

</body>
</html>

Second Step :: Add your css file between <head> and </head> tag on html.

<head>
	<title>Parallax Demo</title>
	<link rel="stylesheet" type="text/css" href="parallax.css">
</head>

Third Step :: We need to create 5 divs for simple parallax effect. Three of these are for adding text and the rest two is for adding images. Write the code showing below for you –

<!--- code for simple parallax effect --->
	<div class="scroll"> <!--- first div ---->
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	</div>
	
	<div class="container"></div> <!--- second div for first image ---->

	<div class="scroll"> <!--- third div ---->
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	</div>
	<div class="containerTwo"></div> <!--- fourth div for second image ---->

	<div class="scroll"> <!--- fifth div ---->
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	</div>

We have completed making HTML structure. Time to switch on CSS baby.

Apply CSS Code

Did you notice something? I just make 3 classes on HTML. Now we nned to apply css code on these classes.

First Step :: The first thing we need do is to style the class which is in paragraph. ( it is .scroll ). Adding css code will enhance this outlook.

.scroll{
    font-size: 30px;
}

Second Step :: We already select our two images for parallax effect. In this step we will add the first image. Write the code showing below for your first image –

.container {
	background-image: url("images/example.jpg");
	padding: 150px;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

Third Step :: One image is added. Time to add the second one. Do the same code for second image.

.containerTwo{
	background-image: url("images/example.jpg");
	padding: 120px;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

Notice carefully. Classes are not same for images. These two divs have two different classes. If you use one single class you cannot show two images for a simple parallax effect.

Here we go. We are all finished now. Check your code now. For your better understand, i have added a video tutorial below. Watch it.

How To Create A Simple Parallax Effect Using HTML & CSS

How is this? Coding is fun, isn’t it? :p :p If you like this comment below. If you think it is not so cool as your thought then describe your opinion regarding it on comment box.

Happy watching. <3 .

Anup Deb Nath Rinku

I am a zero starter. Nothing to say right now, just wait and see. i will come like a thunder.

View all posts by Anup Deb Nath Rinku →

Share Your Opinion With Me

%d bloggers like this: