How to Create a Simple Parallax Scrolling Effect using css

byCodingFlicks -September 10, 2020

0

How to Create a Simple Parallax Scrolling Effect using css

Today, I will share a simple snippet based on How to Create a Parallax Scrolling Effect using CSS. Now, what is the parallax scrolling effect? It is something that when users scroll down the web page, they see the background moves slower compared to the foreground of the website. To get the perfect parallax effect, we are supposed to use javascript or jquery. But here, I use plain HTML and CSS to get the effect.

HTML

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

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(https://i.postimg.cc/CMGVMj99/1.jpg);
-webkit-background-size:cover;
background-size:cover;
background-position: center center;
background-attachment:fixed;
}
.second{
background-image: url(https://i.postimg.cc/ZKw20jHs/2.jpg);
-webkit-background-size:cover;
background-size:cover;
background-position: center center;
background-attachment:fixed;
}
.third{
background-image: url(https://i.postimg.cc/pTQ1vByZ/3.jpg);
-webkit-background-size:cover;
background-size:cover;
background-position: center center;
background-attachment:fixed;
}
.fourth{
background-image: url(https://i.postimg.cc/DZhBxb5b/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;
}

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