Post on 02-Jul-2015
description
CSS parallax scrollingEnhanced scrolling done right.
Don’t use JavaScriptRepaints are evil.
Scrolling is sensitiveEnhance, don’t replace.
Keith ClarkOne smart dude.
Enter the third dimensionUse CSS3 perspective.
<body class="parallax"> <div class="parallax-layer parallax-layer-back"> ... </div> <div class="parallax-layer parallax-layer-base"> ... </div></body>
.parallax { height: 100vh; perspective: 1px; overflow: hidden; overflow-y: scroll;}
.parallax-layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
.parallax-layer-base { transform: translateZ(0);}.parallax-layer-back { transform: translateZ(-1px) scale(2);}
Any modern browserIE does not support nesting, duh.
More informationkeithclark.co.uk/articles/pure-css-parallax-websites/
Guido Boumanhttp://github.com/guidobouman