Aprender a crear animaciones HTML usando JavaScript.
Una página Web básica
Para demostrar cómo crear animaciones HTML con JavaScript, vamos a utilizar una simple página web:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<h1>My First
JavaScript Animation</h1>
<div id="animation">My animation will go here</div>
</body>
</html>
Inténtalo tú mismo " Crear un contenedor de Animación
Todas las animaciones deben estar en relación con un elemento contenedor.
Ejemplo
<div id ="container">
<div id ="animate">My
animation will go here</div>
</div>El estilo de los Elementos
El elemento contenedor debe realizarse con el style = "position: relative".
El elemento de animación debe realizarse con el style = "position: absolute".
Ejemplo
#container {
width: 400px;
height:
400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height:
50px;
position: absolute;
background: red;
}
Inténtalo tú mismo " Código de animación
animaciones de JavaScript se llevan a cabo mediante la programación de los cambios graduales en el estilo de un elemento.
Los cambios se llaman por un temporizador. Cuando el temporizador de intervalo es pequeño, la animación se ve continua.
El código básica es:
Ejemplo
var id = setInterval(frame, 5);
function frame() {
if (/*
test for finished */) {
clearInterval(id);
} else {
/* code to change the element style */
}
}
Crear la animación usando JavaScript
Ejemplo
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';
}
}
} Inténtalo tú mismo "