Aprender a crear animaciones usando JavaScript.
Una página Web Básico
Para demostrar cómo crear animaciones HTML con Javascript, podemos utilizar una página web sencilla.
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>
Inténtalo tú mismo " El estilo de los Elementos
Para hacer posible una animación, el elemento de animación debe estar animada con relación a un "parent container" .
El elemento contenedor debe ser creado con style = "position: relative" .
El elemento de animación debe ser creado con style = "position: absolute" .
Ejemplo
#myContainer {
width: 400px;
height:
400px;
position: relative;
background: yellow;
}
#myAnimation {
width: 50px;
height:
50px;
position: absolute;
background: red;
}
Inténtalo tú mismo " El 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 son llamados por un temporizador. Cuando el intervalo del temporizador es pequeña, la animación se ve 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 */
}
}
Crear la animación usando JavaScript
Ejemplo
function myMove() {
var elem =
document.getElementById("myAnimation");
var pos = 0;
var id = setInterval(frame,
10);
function frame() {
if (pos ==
350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
} Inténtalo tú mismo "