CSS-Only Parallax Scrolling

Moving at different speeds

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.

But Github’s 404 page is done with javascript (and has nothing to do with scrolling). We will write some code purely in CSS to get that parallax effect for our site. Just a disclaimer before you dive any further: The effect does not work on smaller devices like your phone.

So here I’m designing a page with 5 sections of equal height. You can play with varied heights and still get the effect.

We call all our sections as .post. For a clean, modern look, I’m making each .post full page with minimal text and a beautiful background (courtesy of unsplash.it).

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).

.post {
  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

.stick {
  background-attachment: fixed;
}

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.