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

Share Improve this question Follow edited Jul 26, 2011 at 17:36 brainjam 19k88 gold badges6060 silver badges8484 bronze badges asked Jul 26, 2011 at 2:55 andrewheinsandrewheins 79822 gold badges1111 silver badges1717 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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