Parallax scrolling effect using CSS
Last Updated :
11 Oct, 2024
Parallax scrolling effect using CSS creates an illusion of depth by making background elements move slower than foreground elements as the user scrolls. This effect adds a sense of three-dimensionality, enhancing visual appeal and interactivity on web pages for a more dynamic experience.
Approach: Creating Parallax Scrolling Effect
- Set Background Images: Assign background images to .parallax1 and .parallax2 classes using background-image property for visual content.
- Parallax Effect Properties: Use background-attachment: fixed to make the background stay static while scrolling.
- Background Positioning: Utilize background-position: center, background-repeat: no-repeat, and background-size: cover for proper image display.
- Define Height: Set min-height: 500px for the parallax sections to ensure enough scrolling space.
Syntax
background-attachment: scroll/fixed/local;
background-position: value;
background-repeat: repeat/repeat-x/repeat-y/no-repeat;
background-size: auto/length/cover/contain/;
Example of Parallax scrolling effect using CSS
Example: In this example we creates a parallax scrolling effect by setting background images with background-attachment: fixed for .parallax1 and .parallax2, making the background stay static while the content scrolls.
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 OutputNote: This parallax effect does not always work with mobiles and tablets, so you need to turn off the effect using media queries.