Apprenez à créer des animations en utilisant 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>
Essayez vous - même » Styling les éléments
Pour faire une animation possible, l'élément d' animation doit être animé par rapport à un "parent container" .
L'élément conteneur doit être créé avec style = "position: relative" .
L'élément d'animation doit être créé avec style = "position: absolute" .
Exemple
#myContainer {
width: 400px;
height:
400px;
position: relative;
background: yellow;
}
#myAnimation {
width: 50px;
height:
50px;
position: absolute;
background: red;
}
Essayez vous - même » Le code d'animation
animations JavaScript sont effectuées par la programmation des changements progressifs dans le style d'un élément.
Les changements sont appelés par une minuterie. Lorsque l'intervalle de temporisation est petite, l'animation semble continue.
Le code de base est le suivant:
Exemple
var id = setInterval(frame, 5);
function frame() {
if (/*
test for finished */) {
clearInterval(id);
} else {
/* code to change the element style */
}
}
Création de l'animation à l'aide JavaScript
Exemple
function myMove() {
var elem =
document.getElementById("myAnimation");
var pos = 0;
var id = setInterval(frame,
10);
function frame() {
if (pos ==
350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
} Essayez vous - même »