Como acercamiento inicial de proyecto se buscó generar una animación utilizando una serie de imágenes digitalizadas a partir de una libreta que llevo realizando desde hace unos semestres. Para esto utilice un código de programación por HTML utilizando Adobe Dreamweaver, alterando un número en específico para jugar con diferentes velocidades en el cambio de secuencia entre una imagen y otra.
A continuación les adjunto un código base para realizar este tipo de mini animaciones.
Se debe tener en cuenta que tanto las imágenes como el archivo de Dreamweaver deben estar guardados en una misma carpeta para que funcione.
<html>
<script>
window.onload = abrirLosOjos;
function abrirLosOjos()
{
var images = [ ];
images[0] = "url('1.jpg')"; //dentro del paréntesis y entre estas comillas ' ' debe aparecer el nombre de la imagen que se quiere utilizar tal y como aparece guardada en la carpeta.
<script>
window.onload = abrirLosOjos;
function abrirLosOjos()
{
var images = [ ];
images[0] = "url('1.jpg')"; //dentro del paréntesis y entre estas comillas ' ' debe aparecer el nombre de la imagen que se quiere utilizar tal y como aparece guardada en la carpeta.
images[1] = "url('2.jpg')";
images[2] = "url('3.jpg')";
images[3] = "url('4.jpg')";
images[4] = "url('5.jpg')";
var numero = 0;
window.setInterval(function()
{
document.body.style.backgroundImage = images[numero];
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundSize = "1000";
numero++;
if(numero == 5)
{
numero = 0;
} }, 45) //éste es el número que se debe alterar para cambiar el ritmo de la animación
}
</script>
</html>
images[2] = "url('3.jpg')";
images[3] = "url('4.jpg')";
images[4] = "url('5.jpg')";
var numero = 0;
window.setInterval(function()
{
document.body.style.backgroundImage = images[numero];
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundSize = "1000";
numero++;
if(numero == 5)
{
numero = 0;
} }, 45) //éste es el número que se debe alterar para cambiar el ritmo de la animación
}
</script>
</html>
Alejandra López Urueña
No comments:
Post a Comment