Parallax is almost always handled with JavaScript and, more often than not, it's implemented badly with the worst offenders listening for the scroll event and modifying the DOM directly in the handler, triggering needless reflows and paints. All this happens out of sync with the browsers rendering pipeline causing dropped frames and stuttering. It's not all bad though, requestAnimationFrame and deferring DOM updates can transform parallax websites - but what if you could remove the JavaScript dependency completely?
Deferring the parallax effect to CSS removes all these issues and allows the browser to leverage hardware acceleration resulting in almost everything being handled 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?
Deferring the parallax effect to CSS removes all these issues and allows the browser to leverage hardware acceleration resulting in almost everything being handled 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?
Base Layer
Base Layer
Background Layer
Foreground Layer
Base Layer
Base Layer
Background Layer
Deep Background Layer
Foreground Layer
Base Layer
Background Layer
Base Layer
Base Layer
No comments:
Post a Comment