CSS Parallax - DotCSS 2014
13
-
Upload
guido-bouman -
Category
Internet
-
view
748 -
download
1
description
Slides for my lightning talk during DotCSS 2014
Transcript of CSS Parallax - DotCSS 2014
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
