CODEWITHSUNDEEP
jqueryscrollpositioningparallax
Pat Friedl
Pat Friedl

Reputation: 542

jQuery Parallax - elements not ending up here they started

I'm currently working on a parallax plugin to help create one of those vertically scrolling sites where some elements create a parallax effect.

Most plugins use huge DIV tags and scroll the backgrounds. In my case, that won't work since the client wants animated character sprites and all kinds of other elements to be parallaxed - like content. So instead of moving backgrounds, I need to move the elements themselves. I have yet to find a plugin that will do this.

My plugin is working pretty darn well, with one exception. With jittery or heavy scrolling, elements are creeping on the page - not ending up where they started vertically. Here's an example (pardon the horrible styling, it's a rough mockup): http://www.nebulus.org/parallax-test

Oh, the in-progress plugin is here: http:/www.nebulus.org/parallax-test/js/libs/jquery.scrollParallax.js

If you scroll quickly up/down, you'll notice that the sprites at the top of the page end up pretty far off from where they started. Anybody have an idea on how to get them to behave? Thanks very much for your help - I do plan on releasing the plugin once it's done (nudge nudge, wink wink).

Upvotes: 2

Views: 443

Answers (1)

Adrik
Adrik

Reputation: 11

for small changes in position (containerScrollY1-containerScrollY2) = 1 or -1,You have a rounding problem at 

newY = myPosY + (containerScrollY1-containerScrollY2)*params.inertiaY;
$base.css('top',newY+'px');

if inertia = 0.25 and you scroll down by one pixel, then new = old - 0.25 which floors to old - 1 if you scroll up by one pixel then new = old + 0.25 which floors to old so for any scroll of a single pixel (which i logged a lot of trying your code), the object moves up by one when scrolling down and doesn't move at all when scrolling up.

for big changes in position (the scrolling quickly you talked about) the problem stems from only moving objects if they are visible. If you remove the isVisible condition inside handleScrolling, the rapid scrolling problem disappears (as long as every scroll is big enough to avoid the rounding problem above). For example, a scroll of 100 pixels was causing an object that was 20 pixels off-screen to move 80 pixels in an unrecorded jump (i.e. its myPosY fell out of sync by 80 pixels).

To fix potentially both of these issues I would store the object's originating position as a parameter, then always calculate its parallaxed position from this absolute. Such as newY = params.origY - $(params.container).scrollTop()*inertiaY This worked on my end. Good luck!

Also, http://johnpolacek.github.com/scrollorama/ is pretty good and has parallax if you haven't tried it. No idea if it works for your specifics though.

Upvotes: 1

Related Questions