Cómo - Animaciones HTML de JavaScript
Aprende a crear animaciones usando JavaScript.
Una página web básica
Para demostrar cómo crear animaciones HTML con JavaScript, podemos usar una página web simple.
Ejemplo
<!DOCTYPE html>
<html>
<body>
<h1>My First
JavaScript Animation</h1>
<div id ="myContainer">
<div id ="myAnimation">My
animation will go here</div>
</div>
</body>
<html>
Dar estilo a los elementos
Para hacer posible una animación, el elemento animado debe estar animado en relación con un "contenedor principal".
El elemento contenedor debe crearse con estilo = "posición: relativa".
El elemento de animación debe crearse con estilo = "posición: absoluta".
Ejemplo
#myContainer {
width: 400px;
height:
400px;
position: relative;
background: yellow;
}
#myAnimation {
width: 50px;
height:
50px;
position: absolute;
background: red;
}
El código de animación
Las animaciones de JavaScript se realizan mediante la programación de cambios graduales en el estilo de un elemento.
Los cambios son llamados por un temporizador. Cuando el intervalo del temporizador es pequeño, la animación parece continua.
El código básico es:
Ejemplo
var id = setInterval(frame, 5);
function frame() {
if (/*
test for finished */) {
clearInterval(id);
} else {
/* code to change the element style */
}
}
Crea la animación usando JavaScript
Ejemplo
var id = null;
function myMove() {
var elem =
document.getElementById("myAnimation");
var pos = 0;
clearInterval(id);
id = setInterval(frame, 10);
function frame() {
if (pos ==
350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}