Storytelling Scrolling

Go To


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.



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


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


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:

And source:

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