H T M L C S S J A V A S C R I P T S Q L P Y T H O N J A V A P H P C O M M E N T W 3 . C S S C C + + C # A M O R C E R R É A G I R M Y S Q L J Q U E R Y E X C E L L E R X M L D J A N G O N U M P Y P A N D A S N O D E J S R .
M A N U S C R I T A N G U L A I R E G I T P o s t g r e S Q L M O N G O D B A S P I C I A A L L E R K O T L I N T O U P E T V U E D S A G É N É R A T I O N I A S C I P Y A W S L A C Y B E R - S É C U R I T É S C I E N C E S D E S D O N N É E S
Animation JavaScript HTML DOM
❮ PrécédentSuivant ❯
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
utiliserons 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>
Stylisez 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 »
ADVERTISEMENT
Code d'animation
Les animations JavaScript sont réalisées en
programmant des changements progressifs
dans le style d'un élément.
Les changements sont annoncés par un
timer. 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 = [Link]("animate");
let pos = 0;
clearInterval(id);
id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
[Link] = pos + 'px';
[Link] = pos + 'px';
}
}
}
Essayez-le vous-même »
❮ PrécédentSuivant ❯
PUBLICITÉ
PIPETTE À COULEURS
ADVERTISEMENT
LES ESPACES
MISE À NIVEAU
SANS PUBLICITÉ
BULLETIN
OBTENIR UNE CERTIFICATION
CONTACTEZ-NOUS
Meilleurs tutoriels
Tutoriel HTML Tutoriel
CSS Tutoriel
JavaScript Tutoriel
Comment faire Tutoriel
SQL Tutoriel
Python Tutoriel
[Link] Tutoriel
Bootstrap Tutoriel
PHP Tutoriel
Java Tutoriel
C++ Tutoriel
jQuery
Principales références
Référence HTML
Référence CSS Référence
JavaScript Référence
SQL Référence
Python Référence
[Link] Référence
Bootstrap Référence
PHP
Couleurs HTML
Référence Java Référence
Angular Référence
jQuery
Meilleurs exemples
Exemples HTML Exemples
CSS Exemples
JavaScript Exemples
pratiques Exemples
SQL
Exemples Python Exemples
[Link] Exemples
d'amorçage Exemples
PHP Exemples
Java Exemples
XML Exemples
jQuery
Obtenir une certification
Certificat HTML Certificat
CSS Certificat
JavaScript Certificat
Front End Certificat
SQL Certificat
Python Certificat
PHP Certificat
jQuery Certificat
Java Certificat
C++ Certificat
C# Certificat
XML
FORUM SUR LA SALLE DE CLASSE
W3Schools est optimisé pour l'apprentissage et la formation. Les exemples pourraient être
simplifiés pour améliorer la lecture et l’apprentissage. Les didacticiels, références et exemples sont
constamment révisés pour éviter les erreurs, mais nous ne pouvons garantir l'exactitude totale de
tout le contenu. En utilisant W3Schools, vous acceptez d'avoir lu et accepté nos conditions
d'utilisation , nos cookies et notre politique de confidentialité .
Copyright 1999-2024 par Refsnes Data. Tous droits réservés. W3Schools est propulsé par
[Link] .
