CSS Parallax - DotCSS 2014
4 likes1,510 views
This document discusses using CSS parallax scrolling to enhance website scrolling in a sensitive way without using JavaScript. It recommends adding parallax layers as divs within a body with a perspective transform, and controlling the depth of each layer with different translateZ values and scaling. Browser support is good except for older IE versions. More details are available at a listed URL.
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.