Justin du Coeur (jducoeur) wrote,
Justin du Coeur
jducoeur

Skrollr

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
Subscribe

  • The Third Way: Beyond Fun and Authenticity

    I just came across this marvelous essay on the SCA fun/authenticity false dichotomy, and a different way of looking at it. It was written some…

  • How I Spent My Birthday

    (Warning: diary ramble ahead.) Intercon was scheduled a couple of weeks earlier than usual this year -- our experimental hotel last year wasn't…

  • Hamilton Sing-Along

    Almost done with a *very* long weekend at Arisia. Generally been a great time -- worked hard, got to spend lots of time with friends, and have had a…

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 0 comments