Parallax Scrolling: Part 1
Simple CSS, Awesome Effect
Parallax Scrolling is a super simple, super cool CSS effect that allows you to do one of two things:
- Set some content as the background of some container and fix it so that when the user scrolls the page it stays put.
- Set some content as the background of some container and make it appear to move slower than the elements around it when the user scrolls the page.
Today I’ll be taking you through the CSS and an example of the first effect using stock images from Pexels.com. ̶I̶’̶l̶l̶ ̶c̶o̶v̶e̶r̶ ̶t̶h̶e̶ ̶s̶e̶c̶o̶n̶d̶ ̶e̶f̶f̶e̶c̶t̶ ̶i̶n̶ ̶a̶n̶o̶t̶h̶e̶r̶ ̶s̶h̶o̶r̶t̶ ̶a̶r̶t̶i̶c̶l̶e̶. → Parallax Scrolling: Part 2 available here!
Parallax Scrolling CSS
The CSS for this type of Parallax Scrolling is really easy to understand and only makes use of css properties related to background :
background-attachmentbackground-imagebackground-positionbackground-repeatbackground-size
background-attachment: fixed is the most important part of this CSS. It tells the browser to keep the image stuck in place while the user is scrolling which gives us the cool Parallax Scrolling effect.
background-image allows us to set the background of our .parallax element to any image we choose using the url() CSS function (more here). This can be one you’ve stored locally or on hosted externally a server somewhere.
background-position: center will center the image within your container.
background-repeat: no-repeat stops the background from repeating within your container. Background image repetition is default browser behavior. You can ignore this if you don’t mind seeing as many of your image as the browser can fit into your .parallax element
background-size: contain forces the image to fill up your .parallax elements space but still respect the background image’s dimensions. background-size: cover will let the image fill up the same space as your .parallax element, ignoring the background image’s dimensions. You can use whichever or a combination of other values to suit your needs.
When all is said and done, you can have something that looks like this:
If you ignore how choppy the gif is it’s pretty cool, right? :)
For reference this is how the page would scroll without the background-image: fixed css property. Still cool, but not as cool as Parallax Scrolling.
As a bonus, I decided to throw in a sort of curtain transition that I quite like which makes use of a Scroll Spy pattern.
I won’t go into detail around how I did this, but please 🙏🏾 check out the article I wrote that covers building your own Scroll Spy and get started making your own cool scroll-based transitions!
There’s also another clever use of the background-image: fixed property in the second to last page scroll in the Parallax Scrolling gif. See if you can figure out what’s going on there. 😁
Well, that’s all for this one folks! If you liked the article please leave a clap (or two) and a comment.
Thanks for reading and good luck on all your coding adventures!
