parallax techniques
// ------------------------------------------------------
// set background image to fixed
parallax-bg {
background-image: url('...');
background-size: cover;
background-attachment: fixed;
}
// ------------------------------------------------------
// set whole container fixed or absolute and allow other content to go over it
container {
position: fixed;
}
// ------------------------------------------------------
/*
A typical parallax implementation will hook into window.onscroll(),
and will update the backgroundPosition or marginTop of an element
with a background image attached in order to make it move.
An <img> could be used here, but backgrounds are convenient
because they allow for positioning in relative units, tiling and so on.
*/
// quick and dirty - non-performant version
window.onscroll = function(e) {
var parallax = document.getElementById('parallax-background');
parallax.style.marginTop = (window.scrollY/2) + 'px';
}
// ------------------------------------------------------
// somewhat performant - could still debounce and use request animation frame
// promotes item to 3d accelerated layer
window.onscroll = function(e) {
// note: most browsers presently use prefixes: webkitTransform, mozTransform etc.
var parallax = document.querySelector('parallax-background');
parallax.style.transform = 'translate3d(0px,' + (window.scrollY/2) + 'px, 0px)';
}
// ------------------------------------------------------
// more performant using requestAnimationFrame
var parallax = document.querySelector('.featured__image');
parallax.style.position = 'static';
function scrollHandler() {
parallax.style.transform = 'translate3d(0px,' + (window.scrollY/2) + 'px, 0px)';
}
window.onscroll = function(e) {
window.requestAnimationFrame(scrollHandler);
}
/* Resources
http://kristerkari.github.io/adventures-in-webkit-land/blog/2013/08/30/fixing-a-parallax-scrolling-website-to-run-in-60-fps/
http://code.flickr.net/2013/06/04/adventures-in-jank-busting-parallax-performance-and-the-new-flickr-home-page/
http://jankfree.org/
http://www.html5rocks.com/en/tutorials/speed/scrolling/
*/