Parallax Scrolling

[euan_mc]

Hi all,

I’m a relative newbie to all things web design and wondered if someone can help.

I came across this site and basically wanted to replicate it… having content scroll in horizontally from either side of the page as user scrolls down;

http://wesc.com/footwear2010

I’ve looked as various tutorials (i.e ian lunn) and am none the wiser as to how I go about doing something like this.
I downloaded a tutorial pack from pehaa.blog (http://pehaa.com/2011/08/intriguing-animate-on-scroll-effect-jquery-tutorial/) but couldn’t manipulate the code to do as the wesc site does.

If someone has parallax experience perhaps they could set up a quick template for me… where i could then drop in my own images and add additional rows?? If not any advice or direction to other resources would be much appreciated..

Thanks

[noahgelman]

Ah yes, the vertical parallax website. I’ve made about a half a dozen of these things.

How I do it is basically take view port to document offset and use that number as a number to plug into various animations.

For example, say I want an absolute/relative positioned image to move from the left side of my screen to the right as I scroll down. I would take how much I scrolled down and set that as the left value of the image. That, way as I scroll it would move.

Changing the speed is as easy as multiplying the scroll value by a number more or less than 1.

You can also use a number of equations, any element on the page, distances between 2 points, etc. All kinds of stuff to make some custom awesome parallax sites.

[Author]

Posts