Jan
13

Spritely, plugin JQuery pour réaliser des backgrounds animés

Spritely, plugin Jquery

Aujourd’hui je vous présente un « vieux » plugin dont beaucoup de monde a parlé en Mars dernier , mais que j’ai découvert seulement la semaine dernière par hasard.

Et comme j’ai vraiment été bluffé par le rendu de ce plugin, j’ai décidé d’en reparler pour ceux qui, comme moi, aurait loupé ce superbe plugin.

Donc ce plugin se nomme Spritely et vous permet d’animer des backgrounds afin de réaliser une impression de mouvement.

Pour cela, il se base sur l’utilisation de sprites (vous savez, ces images qui contiennent plusieurs images), de HTML et de Javascript bien sûr.

Pour reprendre l’exemple fourni sur leur site, voilà comment animer les oiseaux :

Pour commencer, il vous faut l’image à animer

spritely

Ensuite, il vous faut un div avec l’identifiant « bird » avec le css suivant (180px correspond à la taille d’un oiseau dans l’image sprite)

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

L’animation se fera avec la méthode sprite().Les deux options nécéssaires sont ‘fps’ (frames per second) et ‘no_of_frames’ (nombre d’image dans votre sprite)

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

Avec cette configuration, l’oiseau ira à l’endroit où vous cliquez puis retournera doucement à son point de départ.

Le résultat se trouve sur le site officiel et je trouve cela bluffant le rendu et la fluidité de l’animation, et tout cela sans Flash!



Poster un commentaire

Edito

Bienvenue sur Mémorandom.

Mémorandom est le blog de 2 développeurs web, Appo et Nico.

Vous y trouverez des informations sur différents domaines touchant de près ou de loin au développement web

Tutoriels Yii Framework

Nos derniers articles

Blogs Dev

Liens

Étiquettes