About a year ago I wrote a simple animation script for the Twelve Twenty website. Our website contained a lot of small animations, for older devices we wanted to have a fallback. That’s why I decided to make a jQuery script that replaces regular images with canvas animations.
Last week somebody asked me how I created those animations. That’s why I’m publishing the script I wrote.
To add such animations to your site you add a regular image tag with some special attributes. If the browser has canvas support the script replaces those images with a canvas object.
This is how you add an animation:
<img alt="Twelve Twenty logo" src="/assets/logo.png" height="163" width="141" data-rollover="true" data-animate="true" data-autostart="true" data-json="/assets/logo-animation.json" >
The source code is available at: jankeesvw.github.com/sprite-sheet-animator.js