Free scrolling and parallax issue (jQuery Scroll Path + Parallax)

Question

in a project where I need to build something like the famous parallax-powered Mario Kart Wii Experience site, which also comes with horizontal and vertical scroll (if you haven't seen it, here it is: http://www.nintendo.com.au/gamesites/mariokartwii/#home )

For the scrolling effect, I grabbed the JQuery Scroll Path plugin (website here: http://joelb.me/scrollpath/ ), and it seems to suit my needs concerning the free scrolling.

The problem comes when I try to include some plugin to generate the parallax effect. I tried several plugins (including Stellar.js, jInvertScroll, Parallax.js, Parallax-JS), but none of them seem to work properly. I assume that there's some kind of relationship between the custom scroll that comes with the Scroll Path plugin and the need of the parallax plugins of working with the navigator scroll to make the effect work.

I searched in Google for some similar situation (ie, implementing Scroll Path with some parallax plugin) but I didn't find anyone in my current situation, and it seems that the Scroll Path plugin isn't maintained anymore.

Any idea for making it work would be appreciated!

PS: Sorry for the grammar mistakes, I'm still in process of learning english.

Answer 1

To make 2 plugins working together you should understand how they work. Parallax effect is achieved with few layers that are moved with different speed - the closest to you moves fastest, the most distant moves slowest. Most of the parallax-effect plugins are based on scrollTop calculation - ie layers are moved depending on current scroll offset multiplied by delta-value (which differs depending on layer position).

In your case you should connect jQuery ScrollPath scroll event to parallax plugin. In ScrollPath you should generate scroll event (that will be handled by parallax plugin) in function scrollToStep (look at row 490 in jquery.scrollpath.js). To make calculations simplier you can use 'top' value applied to scrollbar * some delta (you should pick out delta value by yourself). Then in parallax plugin you should modify event handler that applies parallax effect from scroll / mousewheel to event you generate in ScrollPath plugin.

To connect 2 plugins together you should modify their code which means that you won't be able to easily update these plugins to newer version. You should make comments to all your changes in order to reapply them if plugins will be updated in future.