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. see all Article posts
  2. Nested semicircles,
from innermost and slowest
to outermost and fastest-moving:
nature, culture,
governance, infrastructure,
commerce, fashion
    Article post type

    When Our Tools Hold Us Back

    What happens if the ‘pace layers’ get out of sync?

    Ask not just: How well does it work? But also: How well does it fail? What happens when something goes wrong? —Jeremy Keith

    see all Article posts
  3. Wireframe of card elements
in different sized containers --
some laid out vertically in small spaces,
others horizontal when there's room.
    Article post type

    Use the Right Container Query Syntax

    Size queries are stable, and shipping in browsers

    Since we got a first look at a Container Queries prototype back in April 2021, the syntax has changed a few times. But now the spec is stable, browsers are getting ready to ship, and it’s time to make sure you’re using the same syntax they are!

    see all Article posts