Apprenez à créer des animations HTML en utilisant 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>
Essayez - le vous - même » Créer un conteneur d'animation
Toutes les animations doivent par rapport à un élément conteneur.
Exemple
<div id ="container">
<div id ="animate">My
animation will go here</div>
</div>Coiffez 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;
}
Essayez - le vous - même » Animations code
animations JavaScript sont effectuées par la programmation des changements progressifs dans le style d'un élément.
Les modifications sont appelées par une minuterie. Lorsque l'intervalle de temporisation est faible, l'animation se présente en continu.
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 en utilisant 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 »