Previous Entry Share Next Entry
Aaron just pointed me to Every Last Drop, a beautiful little site that emphasizes how much water we use in modern life. It's a lovely educational piece -- you just keep scrolling down, and the site animates to teach. For the layman it's quite nice, but for the old Web hands like me, it's a completely jaw-dropping "How the hell did they *do* that?"

Turns out (after poring over the code for a while) that it leverages a brilliant little library that I hadn't come across before, called Skrollr. Every Last Drop is the most elegant use of it that I've found in digging around, but Skrollr itself is a thing of technical beauty. The GitHub site has a lot of examples, many of them just requiring a few HTML tweaks. The README goes into the full details, but suffice it to say, it's a keyframe-based animation system that applies a tiny bit of Javascript to HTML declarations -- you declare that a CSS property starts with value A here, and transforms to value B there, and Skrollr interpolates the values between them. Get the declarations right and voila: your site animates simply by scrolling down.

It's kind of a one-trick pony, but wow -- that's one heck of a trick, and they wrap it in a lovely, intuitive, powerful API. If you're doing hardcore web design, and want a way to elegantly let users navigate through an animated presentation, you could do a lot worse than this technique...

  • 1
The first place I saw it was on Tesla's page explaining their battery paradigm--it's a lot more subtle than Every Last Drop, but still used effectively.

The combination of the scrolling-reveal (very nifty) and the in-page "exhibits" that you can play with made it feel like a museum--you walk along, seeing the various things that are set up, and every so often there's an interactive piece you can play with to learn something new.

(The other interesting thing for me about that Tesla page was the bit where the URL rewrites itself as you scroll down. Our engineers told me it was impossible when I wanted to design things that I showed them that page...)

  • 1

Log in

No account? Create an account