pbojinov
11/17/2014 - 7:12 PM

parallax techniques

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/
*/