Animation JavaScript HTML DOM
Apprenez à créer des animations HTML à l'aide de JavaScript.
Une page Web de base
Pour montrer comment créer des animations HTML avec JavaScript, nous allons utiliser une simple page Web :
Exemple
<!DOCTYPE html>
<html>
<body>
<h1>My First
JavaScript Animation</h1>
<div id="animation">My animation will go here</div>
</body>
</html>
Créer un conteneur d'animation
Toutes les animations doivent être relatives à un élément conteneur.
Exemple
<div id ="container">
<div id ="animate">My
animation will go here</div>
</div>
Styliser les éléments
L'élément conteneur doit être créé avec style=" position: relative".
L'élément d'animation doit être créé avec style=" position: absolute".
Exemple
#container {
width: 400px;
height:
400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height:
50px;
position: absolute;
background: red;
}
Code d'animation
Les animations JavaScript sont réalisées en programmant des changements progressifs dans le style d'un élément.
Les modifications sont appelées par une minuterie. Lorsque l'intervalle de minuterie est petit, l'animation semble continue.
Le code de base est :
Exemple
id = setInterval(frame, 5);
function frame() {
if (/*
test for finished */) {
clearInterval(id);
} else {
/* code to change the element style */
}
}
Créer l'animation complète à l'aide de JavaScript
Exemple
function myMove() {
let id = null;
const elem = document.getElementById("animate");
let pos = 0;
clearInterval(id);
id = setInterval(frame, 5);
function frame() {
if (pos ==
350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}