Scribd
Importer
110 vues6 pages

Animation JavaScript HTML DOM

Transféré par

Gil
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
110 vues6 pages

Animation JavaScript HTML DOM

Transféré par

Gil
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 6

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 = document.getElementById("animate");
let pos = 0;
clearInterval(id);
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 »

❮ 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
W3.CSS 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
W3.CSS 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
W3.CSS 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
W3.CSS .

Vous aimerez peut-être aussi