Animation DOM JavaScript


Table des matières

    Afficher la table des matières


Apprenez à créer des animations HTML à l'aide de JavaScript.


Une page Web de base

Pour démontrer comment créer des animations HTML avec JavaScript, nous utiliserons un 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 : absolue".

Exemple

#container {
  width: 400px;
  height: 
 400px;
  position: relative;
  
 background: yellow;
 }
#animate {
  width: 50px;
  height: 
 50px;
  position: absolute;
  
 background: red;
}

Essayez-le vous-même →

<!Doctype html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background: red;
}
</style>
<body>

<h2>My First JavaScript Animation</h2>

<div id="container">
<div id="animate"></div>
</div>

</body>
</html>


Code d'animation

Les animations JavaScript sont réalisées en programmant des changements progressifs dans le comportement d'un élément. style.

Les changements sont annoncés par un timer. Lorsque l'intervalle de minuterie est petit, le 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 →

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>

<p><button onclick="myMove()">Click Me</button></p> 

<div id ="container">
  <div id ="animate"></div>
</div>

<script>
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"; 
    }
  }
}
</script>

</body>
</html>