Spritely est une librairie d'animation jQuery vous permettant de réaliser des backgrounds animés, et plus encore !

Vous connaissez sans doute le plugin jAni ou encore la librairie $fx qui permettent de réaliser des backgrounds animés. Et bien voici une nouvelle dans le monde des animations: Spritely.

Spritely vous permettra de réaliser facilement des animations sans flash, à l'aide de sprite et de javascript.

Grâce à la puissance de Javascript, vous pourrez facilement interagir avec l'utilisateur via les clicks de souris, clavier etc.

Voici un exemple d'utilisation de la librairie, pour animer l'oiseau:

Dans un premier temps, il faut concevoir l'image sprite:

Votre sprite devra contenir la séquence des mouvements de votre oiseau. Les largeurs doivent être identiques.

Initialisez la div qui contiendra votre oiseau:

<div id="bird"></div>

Ajoutez une couche de CSS:

#bird {
            position: absolute;
            width: 180px;
            height: 180px;
            background: transparent url(sprite-oiseau.png) top left no-repeat;
        }

Puis initialisez l'animation avec le plugin:

$('#bird').sprite({fps: 12, no_of_frames: 3}).activeOnClick().active();
$('body').flyToTap();

Il faut spécifier le nombre de frame de votre sprite, et la vitesse de l'animation (frame par seconde).

La méthode flyToTap() permet de régir au click de la souris. L'oiseau se rendra à la position du click, puis repartira a sa position initiale aléatoirement.

Une librairie très intéressante et complète pour réaliser vos animations sans flash !

Site Officiel