Parallax scrolling resources

Question

I'm just doing some research for a future project. I am confident with some Parallax scrolling plugins but when looking at some examples for example (http://everylastdrop.co.uk/) instead of vertical transitions there are some that pull div's (or whatever) from the side or by an angle. An example i like is the sun on the website i stated above. I am unsure of really how to go about doing this so was wondering if someone can point me in the right direction to what this method is called or links to provide tutorials. I can find loads of lovely examples but no exact method or plugin to do this!

Thank You

Answer 1

Stellar.js would be a great place for you to start. It's a pretty awesome plugin that simplifies the whole parallax process.

(http://markdalgleish.com/projects/stellar.js/)

I think what you're looking for is a combination of parallax elements and parallax backgrounds.

• Shimsham84: Thank you, I have also just found this plugin: prinzhorn.github.com/skrollr. Wasn't sure if this method had a different name that's all!
• Harlow: I haven't seen that one before, looks pretty cool! Here's another one: johnpolacek.github.com/superscrollorama
• Harlow: ..and one that also has nav/keyboard functionality: johnpolacek.github.com/scrolldeck.js

Answer 2

I built the Every Last Drop site with Skrollr.js which I think you've already found.

The documentation on the GitHub page is really detailed and it's pretty easy to use. There are also some links on there to tutorials and other examples of it being used.

It can do some really cool stuff like interpolating between rgb/hsl values as you scroll, which is how the sky turns from night to day at the beginning. Feel free to give me a shout if you've got any other questions about it!

Answer 3

Take a look at my portfolio site http://anti-code.com.

It has a parallax scroll that moves in all directions, no matter where you are, with the center panel of a 3 x 4 grid of panels being the main default panel.

I just use CSS properties: position, left, and top for placing the panels where I want, and then in the javascript, i generate an object which contains each panel's ID, and it's left/top position, and also the width and height of the wrapper which the panels are inside.

With all of that info, you have all you need to calculate things for a parallax scrolling site.