Magazine Photos

Javascript : animez vos photos facilement avec animage.js

Par Daxlebo

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


Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

A propos de l’auteur


Daxlebo 16 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Magazine