JavaScript Tutorial

Animation DOM JavaScript

Bernard Drouin23 de April de 2023

1 minute read

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

Ma première animation JavaScript

Mon animation ira ici

Créer un conteneur d’animation

Toutes les animations doivent être relatives à un élément conteneur.

Exemple

Mon animation ira ici

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

#récipient {
largeur : 400 pixels ;
hauteur : 400px ;
position : relative ;

fond : jaune ;
}
#animer {
largeur : 50px ;
hauteur : 50px ;
position : absolue ;

fond : rouge ;
}

Essayez-le vous-même »

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);

cadre de fonction() {
if (/* tester pour terminer */) {
clearInterval(id);
} autre {

/* code pour changer le style de l’élément */
}
}

Créer l’animation complète à l’aide de JavaScript

Exemple

Essayez-le vous-même »

#Animation #DOM #JavaScript

Une page Web de base

Exemple

Ma première animation JavaScript

Créer un conteneur d’animation

Exemple

Styliser les éléments

Exemple

Code d’animation

Exemple

Créer l’animation complète à l’aide de JavaScript

Exemple

Bernard Drouin

Related Articles

JavaScript – Placement dans un fichier HTML

JavaScript – Boucles While

JavaScript – Mot-clé vide

Méthodes statiques JavaScript