parallax-scroll
Web icon

Parallax Scroll

Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded
 on 08 December 2020
 by 
3.3
 (3 ratings)
parallax-scroll

Parallax Scroll

Documentation
1.0.0

How To Create a Parallax Scrolling Effect


Use a container element and add a background image to the container with a specific height. Then use the background-attachment: fixed to create the actual parallax effect. The other background properties are used to center and scale the image perfectly: 


Some mobile devices have a problem with background-attachment: fixed. However, you can use media queries to turn off the parallax effect for mobile devices: 


Final Result

https://huarlem.outsystemscloud.com/Parallax_Sample/

© 2020 www.w3schools.com