Animation HTML DOM JavaScript

Apprendre à créer des animations HTML avec JavaScript.

Page de base

Pour démontrer comment créer une animation HTML à l'aide de JavaScript, nous utiliserons un simple site web :

Exemple

<!DOCTYPE html>
<html>
<body>
<h1>Ma première animation JavaScript</h1>
<div id="animation">Ma animation est ici.</div>
</body>
</html>

Créer le conteneur d'animation

Toutes les animations doivent être associées à l'élément de conteneur.

Exemple

<div id ="container">
    <div id ="animate">Ma animation est ici.</div>
</div>

ajouter des styles à l'élément

devrait être créé via style = "position: relative" créer l'élément de conteneur.

devrait être créé via style = "position: absolute" créer l'élément d'animation.

Exemple

#container {
    width: 400px;
    height: 400px;
    position: relative;
    background: yellow;
}
#animate {
    width: 50px;
    height: 50px;
    position: absolute;
    background: red;
}

Essayez-le vous-même

Code d'animation

Les animations JavaScript sont réalisées par programmation des changements progressifs des styles des éléments.

Cette variation est réalisée par un compteur. Lorsque l'intervalle du compteur est très court, l'animation semble fluide.

Le code de base est :

Exemple

var id = setInterval(frame, 5);
function frame() {
    if (/* Test si la tâche est terminée */) {
        clearInterval(id);
    } else {
         /* Code pour modifier le style de l'élément */
    }
}

Créer une animation avec JavaScript

Exemple

function myMove() {
    var elem =  document.getElementById("animate"); 
    var pos = 0;
    var id = setInterval(frame, 5);
     function frame() {
        if (pos ==  350) {
             clearInterval(id);
        } else {
             pos++; 
             elem.style.top = pos + 'px'; 
             elem.style.left = pos + 'px'; 
        }
     }
}

Essayez-le vous-même