I know I’m late to the game with this, as well as a ton of other things, but I’ve been trying to carve out time to explore little code techniques that catch my eye. One of these is parallax scroll effects. Its the effect we see on some websites in which a user can scroll on a page and text or other elements scroll up or down the screen while the background stays in place. In some cases, the background will move with the other elements, but at a different pace or after a certain element has started moving. Then, when it moves past, a different background image scrolls in to take its place.
It turns out, a lot of this can be done using the “background-attachment: fixed;” style in CSS on a background element.
Here’s the page from w3schools that I used as a template to begin experimenting:
These are the tests I did in CodePen. The first one basically mimics w3schools, and the others are slight variants.
The first one (100vh) shows a background image at full viewport height and a tall div that can be used to scroll and demonstrate that the background stays in place. The second one (50vh) takes that same image and shows it at half-height, because I was curious about how it would look and how it would affect positioning of elements that came after it. The third one (centered text) includes text with no visible background that can be scrolled over the fixed background, and the last one (multiple images) brings up another background image after the height of the first one has been scrolled. That last one is what had caught my eye on a lot of other websites, as well as the text with transparent background.
There might be other ways to do achieve this effect using z-index or other techniques. At some point I’ll look into these as well (to see if I’m right about this assumption). In the meantime, I want to add this to some of my existing projects, and use it on some upcoming ones.
REDO FROM START 