CODEWITHSUNDEEP
jqueryhtmlscrollparallax
Shimsham84
Shimsham84

Reputation: 327

Parallax scrolling resources

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

Upvotes: 0

Views: 1718

Answers (3)

Peter Larkin
Peter Larkin

Reputation: 85

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!

Upvotes: 1

jaredwilli
jaredwilli

Reputation: 12308

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.

Upvotes: 0

Harlow
Harlow

Reputation: 153

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.

Upvotes: 1

Related Questions