Posts Tagged ‘parallax’

Pure CSS Parallax Websites

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!


Parralax.js – Simple, lightweight parallax engine that reacts to the orientation of a smart device.


Besides mouse/cursor support, it works on mobile and tablet (where gyroscope or motion detection hardware is available) too.
It comes with multiple options for customizing the effect where they can be set inline using “data attributes” or in JavaScript.

Parallax.js reacts to the orientation of your smart device, offsetting layers depending on their depth within a scene… Oh, you don’t have a smart device? No worries, if no gyroscope or motion detection hardware is available, parallax.js uses the position of your cursor instead. Radical.