Justin du Coeur (jducoeur) wrote,
Justin du Coeur


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...
Tags: technology
  • Post a new comment


    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded