Search code examples
jqueryhtmlcssgoogle-chromeparallax

Parallax scrolling with jQuery for one div

What I want to achieve is to make some of the divs in background scroll slower than the rest to make that parallax scrolling effect. I've found and modified this piece of jQuery code:

$(window).scroll(function () {

    $('.anim').css({
        'top': -($(this).scrollTop() / 3) + "px"
    });

});

and it works fine with one exception, my div has "top:200px" and as far as I understand the first time I scroll it resets top to 0 and the does its thing proper way. Here's the demo so you can see why it doesn't look ok, don't mind the "black world" cut, it's just a placeholder for now. When you scroll first time you can notice a "jump" to top:0. Is there anyway to not let it happen?

http://klaunfizia.pl/damian/

Solution

  • You're setting the absolute y position in your line

    'top': -($(this).scrollTop() / 3) + "px"

    You need to adapt it to the div' starting position

    'top': 200-($(this).scrollTop() / 3) + "px"