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 :

  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
  5. 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.

Outil de référencement professionnel - essai gratuit Ce contenu a été publié dans Webdesign, avec comme mot(s)-clé(s) , , , . Vous pouvez le mettre en favoris avec ce permalien.

4 réponses à Javascript : animez vos photos facilement avec animage.js

  1. djey dit :

    Chouette votre blog et bien sympa cette petite animation java! Merci pour le code et les explications!!

  2. BenCrans-Montana dit :

    Cher Damien, merci pour votre script, simple d’utilisation, léger et diablement efficace! Il m’a notamment permis de donner un "coup de jeune" à ma webcam: link to fiechter.biz.
    MERCI au Caphar!!!!

  3. no doubt dit :

    Merci pour ce petit script que je vais pouvoir adapter à ma sauce :)

  4. CHOUKRI dit :

    salut , les fichiers zip ne existent plus

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *