View
748
Download
1
Category
Preview:
DESCRIPTION
Slides for my lightning talk during DotCSS 2014
Citation preview
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
Recommended