Parallax Scrolling: Part 2

Simple CSS, Awesome Effect

Parallax Scrolling is a super simple, super cool CSS effect that allows you to do one of two things:

1. Set some content as the background of some container and fix it so that when the user scrolls the page it stays put.
2. 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 second effect using stock images from Pexels.com and some help from Miles Morales (example 1) and Goku and Vegeta (example 2). The first effect can be found in my article Parallax Scrolling: Part 1.

Parallax Scrolling CSS

This form of Parallax Scrolling is all about creating a bit of chaos on the z-axis . Controlling what’s happening on the z-axis helps allow the .parallax element to scroll at a different speed than its parent element. To do this, we use the perspective and transform CSS properties utilizing the translateZ() CSS function with the latter. You can find out more about perspective and translateZ() here and here.

The background related CSS properties were covered in Parallax Scrolling: Part 1.

Next we use the background-image CSS property to set the background image for our .parallax elements.

Finally, we can use some HTML like below to see our Parallax Scrolling effect work its magic!

Example 1

This example follows the CSS used in the tutorial. Here you will see the city background scrolling slightly slower than your scroll speed on the first page. On the second page you can see that both Miles Morales (Spider-man) and the city background scroll at different speeds.

Open in New Window to see the full effect

Example 2

In this example, I used very similar techniques to example one, but also worked with the ::before and ::after pseudo elements manage Vegeta and his Hakai blast. I also made use of my Scroll Spy pattern to tell the browser when to animate the child parallax elements. :)

Open in New Window to see the full effect

Have a play around with the Code Sandbox examples and get started with your very own Parallax Scrolling effects!

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!