Which jQuery to use?

JavaScript
1

Hi all,

During my daily surfing round I found this website. You will notice, when navigating from page to page, it is actually a vertical scrolling site. I like the effect of the two divs going in opposite directions, but can’t figure which of the jQuery plug-inns I see in the page source is used to get this effect. Can any of the Javascript gurus here on sitepoint tell me which plug-inn to use or of a tutorial that explains this effect.

Thank you so much in advance

2

Hi there,

The effect that this site uses is called Parallax Scrolling.
You can see more examples here: http://webdesignledger.com/inspiration/18-beautiful-examples-of-parallax-scrolling-in-web-design

There’s a good tutorial on the basics here: http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/

The site in question seems to be using a script called goofyScroller.js and some inline JS to acheive this effect.
I don’t think it was done with a plugin.

HTH

3
Off Topic:

See what the site looks like with JS off before you get too excited about this kind of site construction. [It’s a blank white page. :nono: ]

4
Off Topic:

Yeah, it is pretty broken

5

@ Pullo: Thank you so much for your reaction. But both in the examples and the tutorial it is all going in one direction, where I find the divs going in opposite directions very interesting. Do you have any other suggestions?

@Ralph: I am not too excited. I just found it an interesting effect. I only hope I can get it working in IE as well otherwise it is not an option in the first place

6

Sure do.
This is one of my favourite Parallax Scrolling plugins: http://dev.jonraasch.com/scrolling-parallax/

If you look in the docs under “Animation options for Scrolling Parallax”, you can see that it has this functionality:

reverseDirection (Boolean)
Set to true to cause the parallax scrolling to move in the opposite direction.

I don’t think there’s a demo of exactly that, though :frowning:

If you want a bit more inspiration, look here: http://www.tripwiremagazine.com/2012/07/parallax-scrolling.html
I’m sure you’ll find something.