CSS-Only Parallax Scrolling
Parallax Scrolling is a cool web-design trend that looks appealing, friendly and weirdly pleasing (unless its overused). To oversimplify it’s definition, elements on the screen scroll at different speeds. When scrolling (or simply moving the cursor), elements move slower or faster than the foreground, background or adjacent elements. Perhaps the most famous example for the parallax effect is Github’s 404 page.
So here I’m designing a page with 5 sections of equal height. You can play with varied heights and still get the effect.
For every .post, I’m setting the top and bottom padding to 5em (simply to vertically-align my text). This style is depends on your content. Throw in some basic background styles for to make the page look nice. What’s important to note here is that every .post has a different background image (you can also use different background colors instead, but I’d recommend background images).
padding: 5em 0;
background: 50% 50% / cover no-repeat;
For a simple parallax effect, the trick here is to set every alternate background’s attachments to be fixed. I call it the .stick post. It stays fixed when you scroll and does not move like the other sections. So every alternate section has two classes: post and stick
Here’s the CodePen demo:
A variation you can try is to add background-attachment: fixed; to all posts (in .post). This creates a parallax effect where the foreground text moves as you scroll but the background images won’t. I love this effect too because it makes the web page look more like a single-viewport application.
Here’s the CodePen demo for that:
Of course this is all very basic parallax stuff. For more complex effects, you need JS. I’ll soon write a Medium post for that too.