How to Create a Parallax Scrolling Effect in CSS

CSSWeb DevelopmentFront End Technology

By specifying different speeds for background and foreground content, we can create a parallax scrolling effect using CSS.

The following example shows the CSS parallax scrolling effect −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
body, html {
   height: 100%;
   text-align: center;
}
.example {
   height: 100%;
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}
#demo {
   background: url("https://images.unsplash.com/photo-1612698565524- 1101522e9a21?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixlib=rb1.2.1&q=80&w=800");
}
#dist {
   height:150px;
   background-color: rgba(102,234,99,0.5);
   padding: 2%;
}
#d2 {
   background: url("https://images.unsplash.com/photo-1611489473774-5d881f1153f1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixlib=rb1.2.1&q=80&w=800");
}
</style>
</head>
<body>
<div id="demo" class="example"></div>
<div id="dist">
Sed a porttitor enim. Integer euismod dui massa, at posuere sem fermentum at. Fusce vehicula
fringilla tortor, ut mattis sapien tristique ac. Phasellus eleifend malesuada orci, et facilisis arcu
egestas vel. Duis in tempus libero. Nunc nibh arcu, tempus quis lectus ut, blandit tincidunt felis. Suspendisse potenti.
</div>
<div id="d2" class="example"></div>
</body>
</html>

Output

This will produce the following result −

raja
Published on 13-Mar-2021 16:41:22
Advertisements