Javascript : animez vos photos facilement avec animage.js

Clic ! Clic ! Clic ! En trois photos, vous avez capturé une course folle ou une danse débile. Trois photos, c'est bien, mais ça ne rend pas le mouvement. Comment les enchaîner pour recréer cette dynamique ? Comme par hasard, voici animage.js, un script très léger qui vous permet d'animer vos images.

Clic ! Clic ! Clic ! En trois photos, vous avez capturé une course folle ou une danse débile. Trois photos, c'est bien, mais ça ne rend pas le mouvement. Comment les enchaîner pour recréer cette dynamique ? Comme par hasard, voici animage.js, un script très léger qui vous permet d'animer vos images.

Exemples

Image avec départ automatique (cliquez sur l'image pour l'arrêter) :

Image avec départ manuel (cliquez sur l'image pour lancer l'animation)

Utilisation

1. Téléchargez l'un des fichiers ci-dessous et décompressez-le dans un répertoire de votre site :

   • le script animage.js seul (ZIP 1ko).
   • le script animage.js accompagné d' un exemple de fichier HTML (ZIP 75ko)

2. Déclarez le fichier animage.js dans l'en-tête de votre page :

   <script src="animage.js"></script>
   

3. Créez une ou plusieurs images dans la page et dotez-les chacune d'un identifiant spécifique :

   <img src="images/mon_image1.jpg" id="animage_1" >
   <img src="images/mon_image4.jpg" id="animage_2" >
   
   

4. Définissez les images à intégrer et créez un objet animage via un script placé dans l'en-tête de la page :

   <script>
   // Déclaration des images de la première animation
   var tableau_images_1 = [
      'images/mon_image1.jpg',
      'images/mon_image2.jpg',
      'images/mon_image3.jpg'
   ]
   // Création de l'objet animage pour la première animation
   new animage ('animage_1', tableau_images_1, 250, false);
   
   // Déclaration des images de la deuxième animation
   var tableau_images_2 = [
      'images/mon_image4.jpg',
      'images/mon_image5.jpg'
   ]
   // Création de l'objet animage pour la deuxième animation
   new animage ('animage_2', tableau_images_2, 150);
   
   </script>
   

   Arguments :

   • Argument 1 : id de l'élément image qui va accueillir l'animation
   • Argument 2 : liste des images sous forme d'Array
   • Argument 3 : délai entre chaque image, en millisecondes
   • Argument 4 (optionnel) : démarrage automatique de l'animation. Valeur par défaut : true

Conseils

• Vos images doivent être de dimensions identiques pour ne pas être déformées lors de l'animation
• Pour un effet plus saisissant, les images doivent être très similaires : même angle de vue, même sujet légèrement différent. Des images trop différentes donnent un effet de clignotement désagréables à l'oeil
• Pour une diffusion en ligne, choisissez des images de petite taille : si le script tente de précharger chaque image au lancement, la taille de vos images et la qualité de la connexion Internet pourront rendre l'animation très saccadée
• Dans le même ordre d'idées, n'attendez pas de ce script des performances comparables à la vidéo en ligne. Les outils de compression vidéo sont bien plus efficaces à ce petit jeu. (ce qui ne veut pas dire que le script ne peut pas être amélioré sur ce point)
• Pour le son, on repassera. Je ne connais pas de moyen de synchroniser le son avec l'image en javascript. Avis aux bidouilleurs.

Suggestions

Ce script est un premier jet réalisé rapidement et il n'a pas fait l'objet de tests importants. N'hésitez pas à me remonter les bugs éventuels et vos suggestions d'amélioration.