Parallax is almost always handled with JavaScript and, more often than not, it’s not very performant with the worst offenders listening for the scroll event, modifying the DOM directly in the handler and triggering needless reflows and paints. All this happens out of sync with the browsers rendering pipeline causing dropped frames and stuttered scrolling. Better parallax implementations monitor scrolling and defer DOM updates using requestAnimationFrame which can totally transform the experience – but what if you could remove the JavaScript dependency completely?

This article demonstrates how to use CSS transforms, perspective and some scaling trickery to create a pure CSS parallax scrolling website.

Have a look at the following example – note the debug option!