Skip to main
Article
Diagram of layered squares showing movement with arrows

Birds Recommend: Performant Parallaxing with CSS 3D

If you’d like to learn how to create parallax scrolling for your website, Paul Lewis’ guide to performant parallaxing is the perfect place to start.

Thanks to Rachel Nabors for pointing us to Paul Lewis’ excellent article on Performant Parallaxing. This article is so useful, we couldn’t pass up the opportunity to recommend it. Continue reading for a quick summary or head over to Paul’s article right away!

Performant Parallaxing >

Paul, a developer at Google, starts with the don’ts. Don’t use scroll events to create a parallax effect.

JavaScript doesn’t guarantee that parallaxing will keep in step with the page’s scroll position.

Paul Lewis

Trying to achieve a parallax look by changing background position doesn’t work well either, negatively effecting the animation.

Paul recommends using CSS 3D for performant parallaxing, and gives detailed instructions for how to do just that. Anticipating the bugs for us, Paul includes various workarounds.

Have you used this approach? Did it work? Let us know by sending us a message via Twitter.

Performant Parallaxing >

Recent Articles

  1. A chain-link gate in black and white with a sign that says closed indefinitely, and a smaller warning with gruesome icons for entrapment (a person being smashed) and pinching (a hand going through gears)
    Article post type

    How do we move logical shorthands forward?

    There are several proposals, but one major road block

    We’re trying to make progress on shorthand syntax for CSS logical properties. But the path forward depends on where we hope to be a decade from now.

    see all Article posts
  2. block-size, inline-size, size?
    Article post type

    Support Logical Shorthands in CSS

    Can we get this process unstuck?

    The CSS Working Group recently resolved to add a size shorthand for setting both the width and height of an element. Many people asked about using it to set the ‘logical’ inline-size and block-size properties instead. But ‘logical shorthands’ have been stalled in the working group for years. Can we…

    see all Article posts
  3. A hand with painted nails placing a white square of paper into a 9 by 9 grid.
    Article post type

    Better Anchor Positioning with position-area

    It’s not just a shorthand for anchor()

    position-area might be my favorite part of the CSS Anchor Positioning spec, with a ton of features packed in to make things just… work. But there’s no magic here, just a few key parts that work well.

    see all Article posts