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. OddContrast displays P3 gamut range in Oklch color format
    Article post type

    Make the Web a More a Colorful Place!

    A guide to using new color spaces & formats with OddContrast

    OddBird’s color tool not only checks contrast ratios, but supports the new CSS color formats and spaces.

    see all Article posts
  2. see all Article posts
  3. OddContrast displays sRGB gamut range in P3 color format and an estimate of foreground alpha value ratio.
    Article post type

    New Features for OddContrast

    Display color gamut ranges and more

    OddContrast, OddBird’s color format converter and contrast checker, gets new features – including the ability to swap background and foreground colors, and display color gamut ranges on the color sliders. Contrast ratios now incorporate foreground color alpha values.

    see all Article posts