?

Log in

No account? Create an account
Previous Entry Share Next Entry
Skrollr
device
jducoeur
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
(Deleted comment)
  • 1