Fancy Scrolling Sites

Avatar of Chris Coyier
Chris Coyier on

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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.