Scrolling Vertical Parallax

Question

I'm working on a simplified vertical parallax (similar to http://nikebetterworld.com).

I've got a quick demo working - the code technically works, but I'm getting a jittery effect on the repaint after each scroll - it seems like the javascript is happening late. Any idea why? I can't see anything in the script that really stands out.

var getYPosition = function() {
  if (typeof(window.pageYOffset) == 'number') {
    return window.pageYOffset;
  } else {
    return document.documentElement.scrollTop;
  }     
};

$(document).ready(function(){
  var sections = $(".section");
  $(window).scroll(function() {
    var x = getYPosition(),
    y = Math.floor(x / 1600),
    z = $(sections[y]).offset();
    $(sections[y]).css("background-position", "0 " + (getYPosition() - z.top)/2 + "px");
  });
});

Answer 1

It looks like the images are being moved twice - first by the browser scroll, and then by your scroll() handler. Hence the jitter.

You might get a cleaner effect by using position:fixed or background-attachment:fixed for the images - this way they are unaffected by the browser scroll, but will be moved by the scroll() handler. You'll no longer have one effect fighting with the other. You'll have to modify your scroll() handler accordingly.