Comment - Animations HTML JavaScript
Apprenez à créer des animations à l'aide de JavaScript.
Une page Web de base
Pour montrer comment créer des animations HTML avec JavaScript, nous pouvons utiliser une simple page Web.
Exemple
<!DOCTYPE html>
<html>
<body>
<h1>My First
JavaScript Animation</h1>
<div id ="myContainer">
<div id ="myAnimation">My
animation will go here</div>
</div>
</body>
<html>
Styliser les éléments
Pour rendre une animation possible, l'élément animé doit être animé par rapport à un "conteneur parent".
L'élément conteneur doit être créé avec style="position : relative".
L'élément d'animation doit être créé avec style="position : absolu".
Exemple
#myContainer {
width: 400px;
height:
400px;
position: relative;
background: yellow;
}
#myAnimation {
width: 50px;
height:
50px;
position: absolute;
background: red;
}
Le code des animations
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
var id = setInterval(frame, 5);
function frame() {
if (/*
test for finished */) {
clearInterval(id);
} else {
/* code to change the element style */
}
}
Créer l'animation à l'aide de JavaScript
Exemple
var id = null;
function myMove() {
var elem =
document.getElementById("myAnimation");
var pos = 0;
clearInterval(id);
id = setInterval(frame, 10);
function frame() {
if (pos ==
350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}