Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Faster scroll event? - Background "jumps" after scrolling

I have a small problem. I'm trying to do something like nikebetterworld.com's parallax background. In my first attemp, I got something that works, but it can work better. When I scroll, the background position changes. The problem is that it changes a few milliseconds after the scroll, so I can see how the background "jumps" after scrolling.

code:

var $w = $(window);
function move($c) {
    var scroll = $w.scrollTop();
    var diff = $c.offset().top - scroll;
    var pos = '50% ' + (-diff)*0.5 + 'px';
    $c.css({'backgroundPosition':pos});
}
$w.bind('scroll', function(e){
    move(some_container);
});

Any suggestions? Thanks.

Edit

Look at this example: http://jsfiddle.net/MZGHq/ (Scroll down until you see the background image)

like image 584
ezakto Avatar asked Oct 09 '11 22:10

ezakto


3 Answers

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/

like image 193
Muhd Avatar answered Oct 14 '22 13:10

Muhd


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

like image 21
donohoe Avatar answered Oct 14 '22 12:10

donohoe


  1. use 'fixed' background
  2. 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.
like image 2
holden321 Avatar answered Oct 14 '22 13:10

holden321