JavaScript HTML DOM Animatie

Leer hoe je HTML-animaties kunt maken met JavaScript.

Basispagina

Om te demonstreren hoe je HTML-animaties kunt maken met JavaScript, zullen we een eenvoudige webpagina gebruiken:

Voorbeeld

<!DOCTYPE html>
<html>
<body>
<h1>Mijn eerste JavaScript-animatie</h1>
<div id="animation">Mijn animatie staat hier.</div>
</body>
</html>

Maak een animatie-container

Alle animaties moeten worden gekoppeld aan het container-element.

Voorbeeld

<div id ="container">
    <div id ="animate">Mijn animatie staat hier.</div>
</div>

Voeg stijlen toe aan het element

Moet worden gemaakt via style = "position: relative" om een container-element te maken.

Moet worden gemaakt via style = "position: absoluteMaak een animatie-element.

Voorbeeld

#container {
    width: 400px;
    height: 400px;
    position: relative;
    background: yellow;
}
#animate {
    width: 50px;
    hoogte: 50px;
    positie: absoluut;
    achtergrond: rood;
}

Probeer het zelf

Animatiecode

JavaScript animaties worden uitgevoerd door het programmeren van geleidelijke veranderingen in de stijl van het element.

Deze verandering wordt aangeroepen door een teller. Wanneer de teller interval kort is, lijkt de animatie vloeiend.

De basiscode is:

Voorbeeld

var id = setInterval(frame, 5);
function frame() {
    if (/* Test of het proces voltooid is */) {
        clearInterval(id);
    } else {
         /* Code om de stijl van het element te wijzigen */
    }
}

Maak een animatie met JavaScript

Voorbeeld

function myMove() {
    var elem =  document.getElementById("animate"); 
    var pos = 0;
    var id = setInterval(frame, 5);
     function frame() {
        if (pos ==  350) {
             clearInterval(id);
        } else {
             pos++; 
             elem.style.top = pos + 'px'; 
             elem.style.left = pos + 'px'; 
        }
     }
}

Probeer het zelf