Fancy Scrolling Sites

Published by Chris Coyier

In the last year or so, there's been enough sites that do fancy things when you scroll down that it's kind of a trend. I thought I'd blog it, you know, for the sake of history.

By "fancy things" I mean something happens when scrolling down besides the site scrolling down. Elements might move around in unexpected ways or change their size/shape/color/content in some way. It's easier to just experience some of these yourself than listen to me try to fumble through explaining it. These screenshots also don't do much justice. Many of them are video-documented on this site's YouTube channel.



Dentsu Network

View Site   View Movie



Art of Flight

View Site   View Movie



Ben the Bodyguard

View Site   View Movie



Activated Drinks

View Site   View Movie



New Zealand

View Site   View Movie



ala

View Site   View Movie



Authentic Jobs | Charity Water

View Site   View Movie



TEDxPortland

View Site   View Movie



Nizo

View Site   View Movie


So how do they do that?

JavaScript. They detect window scroll position then do stuff (e.g. apply classes, adjust positioning, whatever) according to that position. There aren't any "helper" libraries for doing stuff like this as far as I know since it's so dependent on what you want to do and it already isn't difficult to detect scroll position.

Know any others?

Add them in the comments.