Upload
guido-bouman
View
748
Download
1
Embed Size (px)
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