CSS Only Parallax Scrolling by Keith Clark

Published by Rob Hope in Landing Page Tutorials, on 25 Sep 2014

There is no arguing “Parallax Scrolling” is a very popular trend in modern website design and especially One Page website design. We have featured over 450 Parallax Scrolling One Page Websites.

Yes, the trend is overused and abused but this is often the case of sluggish Javascript performance making the parallax effect just plain annoying.

As Keith Clark explains – “this is because it is waiting for the scroll event, modifying the DOM directly in the handler and triggering needless reflows and paints. Better parallax implementations monitor scrolling and defer DOM updates using ‘requestAnimationFrame’ which can totally transform the experience.”

Deferring the parallax effect to CSS removes all these issues and allows the browser to leverage hardware acceleration resulting in almost all the heavy lifting being handled directly by the compositor. The result is consistent frame rates and perfectly smooth scrolling. You can also combine the effect with other CSS features such as media queries or supports – responsive parallax anyone?

Keith Clark is an experienced front-end web developer from the UK, based in Farnborough. He has put together a series of CSS Only Parallax Scrolling demos that are seriously impressive and also well explained. If the demos aren’t enough to impress, make sure you go into “debug” mode (see screenshot below) to help visualize how the layers are interacting with each other, incredible.


There are only a handful of the 20% off exclusive ONEPAGELOVE coupons left on the Parallax Scrolling Master Class we’re promoting, grab em while you can!

Much love,

Twitter: @robhope
LinkedIn: @robhope
Email: [email protected]