CSS Parallax - DotCSS 2014
•
4 likes•1,506 views
Slides for my lightning talk during DotCSS 2014
More Related Content
Similar to CSS Parallax - DotCSS 2014
Similar to CSS Parallax - DotCSS 2014 (20)
Recently uploaded
Recently uploaded (20)
CSS Parallax - DotCSS 2014
- 3. CSS parallax scrolling Enhanced scrolling done right.
- 4. Don’t use JavaScript Repaints are evil.
- 5. Scrolling is sensitive Enhance, don’t replace.
- 6. Keith Clark One smart dude.
- 7. Enter the third dimension Use CSS3 perspective.
- 8. <body class="parallax"> <div class="parallax-layer parallax-layer-back"> ... </div> <div class="parallax-layer parallax-layer-base"> ... </div> </body>
- 9. .parallax { height: 100vh; perspective: 1px; overflow: hidden; overflow-y: scroll; } .parallax-layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
- 10. .parallax-layer-base { transform: translateZ(0); } .parallax-layer-back { transform: translateZ(-1px) scale(2); }
- 11. Any modern browser IE does not support nesting, duh.