Régler la minuterie pour démarrer un gif

Question

J'ai un fichier .gif qui est animé pour commencer à partir de la gauche de l'écran jusqu'à quelques centaines de pixels vers la droite. L'animation dure 5 secondes et je l'ai réglée pour qu'elle ne retourne pas à son emplacement initial.

Ce que je veux, c'est que le fichier .gif démarre une fois l'animation CSS terminée. Je me rends compte que certains forums donnent des codes pour un effet mouseover de sorte qu'il passe d'une source .jpg de l'animation au .gif. Mais je ne trouve rien qui vous donne une minuterie au lieu de mouseover.

Cela fait quelques années que j'ai travaillé sur des sites Web et j'ai tellement oublié, donc cela a été un combat.

Toute aide est appréciée. À votre santé.

Answer 1

La façon de changer une source <img> via javascript est assez simple, la syntaxe ressemble à img.src = "new/source.gif". La modification d'un fichier GIF correspondant à la fin de votre animation peut être réalisée de plusieurs façons, mais je le ferais en ajoutant l'animation à votre élément en tant que classe en même temps que vous définissez un délai dans votre javascript.

HTML

<img id="image" src="path/to/static.jpg"> 

JAVASCRIPT

var img = document.getElementById("image"); 

function photoSwitch(){ 

    // begin your CSS animation by applying class 
    img.setAttribute("class", "some-animation"); 

    // have javascript wait 5s before switching the image source 
    setTimeout(function(){ 
     img.src = "path/to/moving.gif"; 
    },5000); 
} 

photoSwitch(); 

Dernière question

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Questions connexes

• Aucun problème connexe^_^