Jquery Parallax Scrolling effect - Multi directional

Question

I need to build a multi-directional JQuery parallax page for a client - they basically want it to work in a similar way to this - https://victoriabeckham.landrover.com/INT

Answer 1

Did you look into librairies like Scrollrama http://johnpolacek.github.com/scrollorama/ or Curtain http://curtain.victorcoulon.fr/?

I know in your question you mention that you already looked into different librairies but depending how they work it's difficult to really suggest how to use proper coordinates.

*edit1

If you didn't see it yet, the auther of scrollorama also did superscrollorama which give a bit more controler over the animation for example animation when an element is pinned.

http://johnpolacek.github.com/superscrollorama/

Answer 2

This article in smashinghub.com shows a collection of JQuery plugin for scrolling and parallax effect I'm totally sure one of them will help you. it looks like jQuery Scroll Path is the most advanced of them or suit your requirements.

Answer 3

I threw something together is jsfiddle for you.

http://jsfiddle.net/9R4hZ/40/

The script initializes the start positions of all of the objects first. Then handlers are set up for arrow key and mouse wheel. After that is the meat of the algorithm in the parallaxScroll function.

It uses the ARROWS or MOUSEWHEEL for scrolling.

There are from [left, right, top, bottom] transitions.

The HTML and CSS are really simple.

The JS/jQuery that runs it is self explanatory.

It's an interesting effect, that seems to be geared for artsy type sites.

Answer 4

you have use scrollpath plugin

make path

Answer 5

I realize I'm jumping in late here, and this might seem ultra obvious, but have you tried reverse engineering what they have done on https://victoriabeckham.landrover.com/INT? It looks like the ScrollAnimator script does a bulk of the work. I would download their site & mess with it locally, subtracting parts until I figured out which components provide which pieces of functionality. Then I would read through those to understand how they made it happen.