I'm working on a simplified vertical parallax (similar to ).

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");
  });
});

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

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");
  });
});

• javascript
• jquery
• background
• scroll

• 3 Good LORD, that's annoying. Can we let this fad die quickly? – Brock Adams Commented Jul 26, 2011 at 3:07
• 1 I looked at that while drunk, and it was NOT a good idea. – tster Commented Jul 26, 2011 at 5:35

2 Answers 2

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.

You should check if your scroll callback is being called too often. If this is the case, you can try using setInterval to limit the number of rerenderings:

http://ejohn/blog/learning-from-twitter/

var outerPane = $details.find(".details-pane-outer"),
    didScroll = false;

$(window).scroll(function() {
    didScroll = true;
});

setInterval(function() {
    if ( didScroll ) {
        didScroll = false;
        // Check your page position and then
        // Load in more results
    }
}, 250); //in miliseconds