Birds Recommend: Performant Parallaxing with CSS 3D

Parallaxing

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 >

Don’ts

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.

CSS 3D

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 or join our public Slack channel.

Performant Parallaxing >

Sondra Eby is a brand and interface designer, user-tester, author, and musician.

Let’s Build Something Together!

We want to hear all about your software ideas. Fill out our contact form, join our public Slack chat, or tweet @oddbird to start the conversation.