I'm trying to get a nice parallax scrolling effect for my website, and as long as I scroll the page using scrollbar it seems nice. But when I use keyboard of mouse scroll wheel - it's really choppy and laggy. Here's a portion of JS that's responsible for the parallax.

$(window).scroll(function(){
    if($(document).scrollTop() > 600 && $(document).scrollTop() < 2500){
         var temp =  100 - ($(document).scrollTop() - 1200) / 8;
         var bonus = '50% ' + temp + '%';
         document.getElementById('div').style.backgroundPosition = bonus;
    }
}

Can someone tell me why is it choppy? I tried to resize the background-image to a smaller one, but that doesn't seem to be an issue here and therefore I'm seriously out of mana, don't know what I'm doing wrong. Any help would be appreciated.

I'm trying to get a nice parallax scrolling effect for my website, and as long as I scroll the page using scrollbar it seems nice. But when I use keyboard of mouse scroll wheel - it's really choppy and laggy. Here's a portion of JS that's responsible for the parallax.

$(window).scroll(function(){
    if($(document).scrollTop() > 600 && $(document).scrollTop() < 2500){
         var temp =  100 - ($(document).scrollTop() - 1200) / 8;
         var bonus = '50% ' + temp + '%';
         document.getElementById('div').style.backgroundPosition = bonus;
    }
}

Can someone tell me why is it choppy? I tried to resize the background-image to a smaller one, but that doesn't seem to be an issue here and therefore I'm seriously out of mana, don't know what I'm doing wrong. Any help would be appreciated.

• javascript
• jquery
• html

• I also tried not to reposition background, but make a img, positioned absolutely and fiddle with the 'top' value, but with no luck. Animation still wasn't smooth. – bagienny Commented Nov 15, 2013 at 13:13
• Do you solve this problem? – across Commented Jan 10, 2014 at 18:08

3 Answers 3

i came across the same issue and found a neat trick to solve this. "The last developer" found out you have to fix the background position and work against the scrolling direction:

$(window).scroll(function(){
    if($(document).scrollTop() > 600 && $(document).scrollTop() < 2500){
         var temp =  100 - ($(document).scrollTop() - 1200) / 8;
         var bonus = '50% ' + temp*-1 + '%';
         document.getElementById('div').style.backgroundPosition = bonus;
    }
}

Use this css for your div

background-attachment: fixed;

This definetly feels a lot smoother to me. Source: The Last Developer

The scrolling is choppy because the input is choppy. Scrolling with the keyboard or mouse wheel makes the page jump.

If you want a nice transition I would remend using CSS3 transitions.

They're surprisingly easy to set up and are plugable; you can pop them onto an existing (choppy) transition and it suddenly bees fluid.

I'm not 100% sure you can put a transition on background-position, but if you can this is how you'd do it:

transition: .15s ease-in-out;
transition-property: background-position;

For patibility add:

-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;

-webkit-transition-property: background-position;
-moz-transition-property: background-position;
-o-transition-property: background-position;

Of course there are many more options and bells and whistles, but this should get you started.

I was glad to find a quick and easy fix to this. Installing this smooth scrolling plugin makes mouse scrolling super smooth and eliminates juttery/choppy parallax problems. http://bassta.bg/2013/05/smooth-page-scrolling-with-tweenmax/