4

I created a site that uses some hot jQuery parallax scrolling a while back and it used to be pretty smooth, but recently (update of browsers?) it has gotten choppy. I think it has to do with the firing frequency of the jQuery scroll event. Here is a small example sized version of what I am trying to do... 

$(window).scroll(function() {
    offset = window.pageYOffset;
    $('#firstImg').css({
         "top" : -750 + (offset/1.5) + "px"
    });
});

Basically, it would gradually vertically parallax an image as I scrolled down. You can check out the product here: http://www.davegamache.com/sandbox/best-of-2010/. Campaign Monitor also repurposed my code for their hiring site...check that out here: http://www.campaignmonitor.com/hiring/.

I need to figure out how to prevent the incredibly choppy scrolling. I even created a setInterval and fired the re-positioning code manually (instead of using the .scroll() event) and couldn't get it to be smooth (50m/s was choppy cause it wasn't firing enough, 10m/s just got jumpy cause it seemed to frequent?).

Let me know if anyone can help. Thanks so much!

Dave
  • 41
  • 3

2 Answers2

0

Scroll Event actually is triggered a lot of times for each scroll action (in some browsers like Firefox), so a better approach to handle the scrolling, is the Wheel Event.

Note: The wheel event is fired only when using the mousewheel, cursor keys and dragging the scroll bar does not fire the event; however the scroll event actually is fired when dragging the scroll bar, using cursor keys or mousewheel too.

I recommend that check out this example: stackoverflow.com/a/24815216... which implements a cross-browser handling for the scroll action.

This is a short snippet using wheel (for modern browsers):

$("html").on("wheel", function (e) {
    var deltaY = e.originalEvent.deltaY;
    var scrollTop = $(this).scrollTop();
    if (deltaY > 0) { console.log("scroll down"); }
    else { console.log("scroll up"); }
});
Community
  • 1
  • 1
jherax
  • 5,238
  • 5
  • 38
  • 50
0

I viewed your site & the campaignmonitor.com. Yours seemed to work fine while the other displayed the choppy scrolling you described.

After looking over the differences between your code I noticed Campaign Monitor is using exact pixels for style definitions on their items (for example the bar graph on Seven Years Young) instead of percentage % based position like yours (for example the sketches element).

I tested a the changes using firebug on a few of the elements and it seemed to fix things.

Hope that helps.

Kevin M
  • 1,524
  • 17
  • 38