Parallax scrolling effect using CSS
The parallax scrolling effect in CSS involves moving background images at a slower rate than foreground content, creating an illusion of depth and immersion as users scroll through a webpage. It enhances visual appeal and user experience.
Here we have an HTML setup for a parallax scrolling effect with a fixed background image and multiple sections using the “parallax” class for desired sections.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0"
/>
<title>Parallax Scrolling Effect</title>
<style>
/* CSS for parallax effect */
.parallax {
background-image: url("background-image.jpg");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="parallax">
<!-- Content for the first parallax section -->
</div>
<div>
<!-- Content for the second section -->
</div>
<!-- Add more divs with parallax class for additional sections -->
</body>
</html>
Explanation
Here the explanation of using above CSS properties
background-attachment: scroll/fixed/local;
background-position: value;
- background-repeat: Determines background image repetition: repeat, repeat-x, repeat-y, or no-repeat.
background-repeat: repeat/repeat-x/repeat-y/no-repeat;
- background-size: This property determines the size of the background image.
background-size: auto/length/cover/contain/;
Example of Parallax scrolling effect using CSS
Example: In this example we demonstrates a basic parallax scrolling effect using CSS. Two sections with background images scroll at different speeds as the user scrolls down the page.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Parallax Scrolling Effect</title>
<style>
/* CSS for parallax effect */
.parallax1 {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20240313115219/HTML-tutorial.jpg");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax2 {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20240313115240/CSS-Tutorial-(1).webp");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="parallax1"></div>
<div style="height: 300px">
<h4>
HTML stands for HyperText
Markup Language. It is the
standard language used to
create and design web pages on
the internet. It was
introduced by Tim Berners-Lee
in 1991 at CERN as a simple
markup language. Since then,
it has evolved through
versions from HTML 2.0 to
HTML5 (the latest 2024
version)
</h4>
</div>
<div class="parallax2"></div>
</body>
</html>
Output:
Parallax scrolling effect Example Output
Note : This parallax effect does not always work with mobiles and tablets, so you need to turn off the effect using media queries.
Last Updated :
13 Mar, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...