lunes, 11 de noviembre de 2013

Como animar una serie de imagenes en HTML5 (Crear una animación tipo gif)

Pues eso amig@s,

Si necesitan realizar una animación en HTML5 cargando una serie de imagenes, al más puro estilo de un GIF animado, con el siguiente código pueden hacerlo:

<html>
<head>
<title>Demo: Crear animación por Edu Arana</title>
<script type='text/javascript'>//<![CDATA[

onload = function startAnimation() {
    var frames = document.getElementById("animacion").children;
    var frameCount = frames.length;
    var i = 0;
    setInterval(function () {
        frames[i % frameCount].style.display = "none";
        frames[++i % frameCount].style.display = "block";
    }, 100);
}


//]]>

</script>

</head>
<body>
<p><div id="animacion">
    <img src="anima/1.gif" />
<img src="anima/2.gif" />
<img src="anima/3.gif" />
<img src="anima/4.gif" />
<img src="anima/5.gif" />
</div>
</p>
</body>
</html>

Donde en el DIV animacion insertamos un IMG con la imagen que necesitemos animar. Funciona tanto en IE como así también en Chrome.

Espero les resulte útil.
Salu2.

No hay comentarios:

Publicar un comentario