Parallax scrolling effect using CSS. - GeeksforGeeks

16 Mar, 2021
ParallaxParallax is a 3d effect used in various websites to make webpages attractive. In this effect, as we scroll, the background of the webpages moves at a different speed than the foreground making it look brilliant to the eyes.
Examples:These websites show the parallax effect brilliantly-
Firewatchgame
Gardenstudio
alquimiawrg
This effect is a great visual but an easy method to implement with the help of CSS.First, let us understand what is happening in the given examples.The effect is created because the image in the background is kept fixed with no movement but other images are moving. This simple technique makes this effect look brilliant.Now let us see the implementation of this effect using CSS-Explanation1. background-attachmentThis property is used to determine whether a background image is fixed or scroll with the page.
Syntax : background-attachment: scroll/fixed/local;
2. background-positionThis property determines the starting position of the background image.
Syntax : background-position: value;
3. background-repeatThis property determines whether a background image will repeat or not and if repeated , how will it be repeated.
Syntax : background-repeat: repeat/repeat-x/repeat-y/no-repeat;
repeat – The background image will be repeated both vertically and horizontally.repeat-x – The background image will be repeated only horizontally.repeat-y – The background image will be repeated only vertically.no-repeat – The background-image will not be repeated.4. background-sizeThis property determines the size of the background image.
Syntax : background-size: auto/length/cover/contain/;
auto – Default value.length – Sets the width and height of the background image.percentage – Sets the width and height of the background image in percent of the container element.cover – Scale the background image to be as large as possible so that the background area is completely covered by the background image.contain – Scale the image to the largest size such that both its width and its height can fit inside the content area.
<html><head><style>.parallax {    background-image: url("http://s1.picswalls.com/wallpapers/2015/09/20/2015-wallpaper_111525594_269.jpg");    min-height: 500px;     background-attachment: fixed;    background-position: center;    background-repeat: no-repeat;    background-size: cover;}</style></head><body><p>This is a Parallax</p><div class="parallax"></div><div style="height:1000px;font-size:60px;"><center>Hi</center></div></body></html>
Output:
Note that This parallax effect does not always work with mobiles and tablets, so you need to turn off the effect using media queries.
This article is contributed by Ayush Saxena. If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Front End Developer Skills That You Need in 2022
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript
Differences between Functional Components and Class Components in React
How to create footer to stay at the bottom of a Web page?
How to set the default value for an HTML <select> element ?
Node.js fs.readFileSync() Method
File uploading in React.js
How to Open URL in New Tab using JavaScript ?