Faster scroll event? - Background "jumps" after scrolling
The key is to use a fixed background if you must have it smooth. See http://jsfiddle.net/MZGHq/7/
References:
This page seems to have a good explanation of how the vertical parallax effect works: http://www.webdesignshock.com/one-page-website/
Also take a look at this one (they don't use fixed background...note how it looks a little jumpy like yours): http://www.franckmaurin.com/the-parallax-effects-with-jquery/
var pos = '50% ' + (-diff)*0.5 + 'px';
I believe the problem is the 0.5. When you calculate the new position there is enough of a difference between the previous and new location for it to be a perceptible shift.
Changing 0.5 to 0.2 or lower minimizes this a bit, however the parallax effect is less pronounced - which is not what you want.
I would try a different approach - take a peek at GitHubs 404 page as an example: https://github.com/ddflsdigjh;ad
- use 'fixed' background
- the displacement of background position should be much bigger than scroll (not 0.5 but 0.01) it seemed that the problem take place only in FF. This is the slowest browser in rerendering pages and javascript.