Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create Parallax Scrolling Effect in CSS
By specifying different speeds for background and foreground content, we can create a parallax scrolling effect using CSS. On scrolling up and down, you can easily notice the difference, Mostly, you can find such effect on the home page of a website.
Set the image
First, place and image using the background-image property. With the url, the link of the background image is sourced −
background-image: url("https://www.tutorialspoint.com/static/images/home/coding-groundhero.svg");
Set the height
You need to set a minimum height using the min-height property −
min-height: 500px;
Create the parallax scrolling effect
The parallax scrolling effect can be set using the background-attachment property. The fixed value is set here −
background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;
Set the height for the content
A div is set for the content that would be visible on scroll with the parallax scrolling effect. The height is set using the height property −
.dist {
height:1000px;
background-color: rgba(102,234,99,0.5);
}
Example
The following example shows the CSS parallax scrolling effect −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.scrollEffect {
background-image: url("https://www.tutorialspoint.com/static/images/home/coding-groundhero.svg");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.dist {
height:1000px;
background-color: rgba(102,234,99,0.5);
}
</style>
</head>
<body>
<p>The parallax scrolling effect can be seen when a user scrolls the web page up and down.</p>
<div class="scrollEffect"></div>
<div class="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>
</body>
</html>
239 Views
