How to Create a Simple parallax effect using css

byCodingFlicks -September 10, 2020

0

The parallax effect is an enchanting trick of web design where the background of a website moves slower than the foreground as you scroll. In order to create basic parallax effects beautifully we only need HTML and CSS. With JavaScript, we can create more advanced types of parallax animation. In this blog post, we share a basic snippet of the parallax effect, which was made using only HTML and CSS. Below is a tutorial video that will show you how to create this basic parallax effect with the help of HTML and CSS.

Video Tutorial:

We hope you have watched the video tutorial above on parallax animation. Parallax animation suits best to those websites that want to tell a story or evoke emotions. Creative agency sites, portfolios, and websites used for product showcases can use this web design technique and make their websites more futuristic. The main focus of this trend to grab attention of the user and keep them scrolling. Popular brands like Nike, Spotify, Apple, etc use this technique in their website. Parallax animation creates a sense of immersion and motivates the user to explore a little deeper.

You May Also Like:

Parallax Scrolling Effect using css [ Source Code ]:

To create the CSS parallax effect snippet, we have to create an HTML file and a CSS file. After that, you have to copy the code from the code box below and paste it into your file. After saving the code, open it in your browser. If you are having problem with the code, you can download it from the download button below the blog post.

HTML

<!DOCTYPE html>
<!-- codingflicks.com --> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to Create a Simple Parallax Scrolling Effect using css</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="first"></div>
	<div class="text-area">
		<h2>Header One</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis maxime assumenda ipsam nesciunt deleniti placeat dicta exercitationem repellat magni dolorum officia eos unde ducimus, veritatis alias minus blanditiis accusantium nostrum. Labore perferendis esse deserunt illo expedita quasi neque necessitatibus rem, harum accusantium iure inventore, libero. Delectus illo consequatur alias amet.</p><!-- lorem50 -->        
	</div>
	<div class="second"></div>
	<div class="text-area">
		<h2>Header two</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis maxime assumenda ipsam nesciunt deleniti placeat dicta exercitationem repellat magni dolorum officia eos unde ducimus, veritatis alias minus blanditiis accusantium nostrum. Labore perferendis esse deserunt illo expedita quasi neque necessitatibus rem, harum accusantium iure inventore, libero. Delectus illo consequatur alias amet.</p>
	</div>
	<div class="third"></div>
	<div class="text-area">
		<h2>Header three</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis maxime assumenda ipsam nesciunt deleniti placeat dicta exercitationem repellat magni dolorum officia eos unde ducimus, veritatis alias minus blanditiis accusantium nostrum. Labore perferendis esse deserunt illo expedita quasi neque necessitatibus rem, harum accusantium iure inventore, libero. Delectus illo consequatur alias amet.</p>
	</div>
	<div class="fourth"></div>
</body>
</html>

CSS:

  body {
	margin: 0; 
	padding: 0;
	font-family: lato;
}
div {
	width: 100%;
	height: 100vh;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.first {
	background-image: url(img/1.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}
.second {
	background-image: url(img/2.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}
.third {
	background-image: url(img/3.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}
.fourth {
	background-image: url(img/4.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}
.text-area {
	padding: 100px 0;
	height: auto;
	text-align: center;
	background: #000;
}
.text-area h2 {
	font-size: 40px;
	color: #fff;
	margin: 0 0 20px;
	text-transform: uppercase;
}
.text-area p {
	color: #fff;
	font-size: 18px;
	width: 50%;
	margin: auto;
	line-height: 1.6;
}

Parallax animation is like a magic to any website. Your audience will be captivated by It’s engaging, interactive feature. we don’t need complicated tools like JavaScript to make it happen. We just need a little creativity and some HTML and CSS. We hope you have collected the source code. If you wany more, you can click the load more button on our homepage. Thanks for the visit.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.