javascript - 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

I have the artwork ready and have found many jquery libraries that will allow me to scroll horiz/vertical - but i'm not sure how to combine both together at a specific co-ordinate. Could anyone please point me in a the right direction?

Edit: I did originally sign this post off having looked into Superscrolarama and thinking all was solved - but having struggled with implementing it - I dont think its quite the saviour I thought it was, I need both horizontal and vertical parallax as well as scrolling to achieve above, which it doesn't seem to support - so any other tips I'd be very grateful for!

Answer 1

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.