Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
Related Documents
