23

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!

Dancer
  • 17,035
  • 38
  • 129
  • 206
  • 5
    "Hey, I've got an idea: let's take one of the most basic user-computer interactions that's been around since the early 1980s, and break it completely! If it's shiny enough nobody will mind!" -- Sorry, but there's something fundamentally wrong with changing vertical scrolling into horizontal scrolling *halfway through the page*. – Blazemonger Sep 17 '12 at 14:54
  • Essentially just doing both at once when you arrive at the right place. – Orbling Sep 17 '12 at 15:03
  • cheers guys, I've just gotta do what the client wants! But this is a pain in the ass to figure out - any thoughts/suggestions on how to achieve would be most welcome! – Dancer Sep 21 '12 at 10:42
  • 5
    Basically, it DOESN'T scroll horizontally, it fakes this by mapping the scroll value to the element's horizontal positioning. – Asciiom Sep 21 '12 at 10:47
  • 1
    The (alleged) author of that site talks a bit about how it works [here](http://stackoverflow.com/a/10856671/624093). – rexmac Sep 21 '12 at 13:00
  • This question really interests me. I have been thinking about the same thing and all I can find is hori or vert...but never together in the same site. The closest I could find was: http://blog.fraser-hart.co.uk/jquery-sprite-animation/#.UE3GGHmoxvk – DBUK Sep 26 '12 at 10:51
  • check out scrollorama - its a bit confusing to setup - but works a treat..http://johnpolacek.github.com/scrollorama/ – Dancer Sep 26 '12 at 14:04
  • Not an answer but worth checking out while at unorthodox scrolling effects: http://www.360langstrasse.sf.tv/ – Joram van den Boezem Oct 03 '12 at 11:28
  • 1
    @DBUK - if you're interested in the algorithm behind the effect. I implemented it (with the four directions) in a jsfiddle. (check my answer) – Louis Ricci Oct 03 '12 at 18:20

5 Answers5

20

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.

Louis Ricci
  • 20,804
  • 5
  • 48
  • 62
  • 1
    @DBUK - For simple effects like this I prefer rolling my own code. Plugins have there place, but we're talking ~150 lines of JavaScript. IMHO you can learn more from my thrown together example than you can from an all encompassing jQuery plugin like Scrollrama. – Louis Ricci Oct 04 '12 at 13:00
  • 1
    Sadly I am not up to rolling my own code yet, soon hopefully, but from looking at your js I have a better grasp/understanding of it than I do with scrollrama etc, thanks again :) – DBUK Oct 04 '12 at 13:18
  • Thanks for the great script. If i want to control the scroll speed, then where should i change on the script?. Suggest Please. – Raja May 17 '13 at 06:44
  • @Yadheendran - The calls to "parallaxScroll(NUM_OF_PIXELS_TO_SCROLL)" take a parameter, if you increase the magnitude of the parameter it will scroll faster. You could also decrease the interval time on the "window.setInterval". – Louis Ricci May 18 '13 at 00:58
6

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/

NicMagnier
  • 408
  • 2
  • 8
  • Scrollorama is great and will do the job I think, bit confusing to get my head around as the documentation is pretty sparse - but looks like it will do the trick with som effort.. – Dancer Sep 26 '12 at 12:45
  • spoke too soon! doesnt support multi direction parallax – Dancer Sep 26 '12 at 16:33
  • Do you mean the user will be able to scroll vertically and horizontally navigate the content? – NicMagnier Sep 26 '12 at 17:56
  • no they need to scroll in the one direction (down) and at a certain point the parallax needs to go right to left despite the fact they are still scrolling down.. they want something almost exactly the same as https://victoriabeckham.landrover.com/INT – Dancer Sep 27 '12 at 08:27
  • 1
    I still didn't had time to have a close look at scrollorama but I thought it was possible to move elements left and right. I did a quick test here: http://mx981.com/stuff/scrollrama/test.html – NicMagnier Sep 27 '12 at 18:08
  • Cheers Nic, I'd need to use Superscrollorama though as i'd need the combined pinning/ parallax effects - I cant for the life of me get the script above to work in a pinned superscrollorama syntax - if you could explain that the +100 bounty is yours! – Dancer Oct 01 '12 at 09:35
  • I'd love to help but this week will be tough. If I find some time I'll try to tinker with it. – NicMagnier Oct 01 '12 at 18:44
5

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.

Ma Jerez
  • 4,887
  • 3
  • 23
  • 21
1

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.

Kale McNaney
  • 457
  • 2
  • 4
0

you have use scrollpath plugin

make path
Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
Pankaj Thakur
  • 1
  • 1