donboe — 2012-12-15T05:23:58-05:00 — #1
Thank you so much in advance
pullo — 2012-12-15T07:44:55-05:00 — #2
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.
ralphm — 2012-12-15T08:24:30-05:00 — #3
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: ]
pullo — 2012-12-15T08:31:19-05:00 — #4
Yeah, it is pretty broken
donboe — 2012-12-15T10:44:24-05:00 — #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
pullo — 2012-12-15T11:06:48-05:00 — #6
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:
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
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.