Parallax scrolling with jQuery for one div

Question

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/

Paolo Casciello · Accepted Answer · 2013-11-21 17:44:20Z

6

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"

answered Nov 21, 2013 at 17:44

Paolo Casciello

8,2421 gold badge46 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paolo Casciello Over a year ago

@user2660811 to make it easier, save the original position the first time you attempt to change it in a data attribute. Like if (!$(element).data('original-top')) $(element).data('original-top', $(element).css('top')); and then 'top': $(element).data('original-top')-($(this).scrollTop() / 3);

Collectives™ on Stack Overflow

Parallax scrolling with jQuery for one div

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related