Storytelling Scrolling

Go To StackoverFlow.com

2

Can someone please identify how this site has the effect of sliding through pages? Mainly how it pulls down one page up and onto another. Is it Javascript? I think it is very well done.

http://hire.visualidiot.com/typestacks

Thanks!

Joe

2012-04-04 02:32
by Joe Isaacson
Right click...view source - j08691 2012-04-04 02:34
@j08691 How to know by seeing view source - sgowd 2012-04-04 02:42
Good 1 @j08691 - incredibly insightful

I know it links to the page below, but I am not sure what animates the page pulling it dow - Joe Isaacson 2012-04-04 02:46

Really nice example of whole page animation, glad I opened this question - danjah 2012-04-04 02:51


3

I opened it in Safari and disabled JavaScript. The sliding effect went away (although it degrades nicely). Clearly JavaScript must be involved somehow. Okay, so I popped open Chrome Developer Tools and looked at the resources. There's a script called handler.js. I opened it up and sure enough there's some nicely documented code. It looks like it's using jQuery animations. Take a look at the script. You should be able to figure it out from there.

2012-04-04 02:48
by LandonSchropp
+1. Nice R & D - sgowd 2012-04-04 02:49
thanks @helixed - Joe Isaacson 2012-04-04 03:03
You're welcome - LandonSchropp 2012-04-04 04:31


4

helixed's answer explains how they did it. However if you want to recreate the effect yourself have a look at using Parallaxjs rather than taking potentially copy-written code.

See the demo site: http://stolksdorf.github.com/Parallaxjs/

And source: https://github.com/stolksdorf/parallaxjs/

Edit: There is a bug with that website, try holding down the arrow key for a few seconds before letting go.

2012-04-04 03:01
by P. Galbraith
Ads