Crear una animación utilizando imágenes estáticas con jQuery

JZoopraxiscope es un plugin inspirado en el famoso experimento «El caballo en movimiento» de Eadweard Muybridge. El mismo fue realizado a modo de Doodle no hace demasiado tiempo para conmemorar a su inventor.

El zoopraxiscopio puede ser recreado perfectamente utilizando este fantástico plugin, lo único que tenemos que hacer, y que me parece lo más complicado, es realizar la secuencia de imágenes para que podamos reproducirla y que el resultado sea realmente agradable a la vista.

Crear una animación utilizando imágenes estáticas con jQuery

Ejemplo de uso:

El primer paso es agregar todas las bibliotecas necesarias para que el plugin funcione:

<script src="jquery.jzoopraxiscope.js"></script>
<script src="jquery.min.js"></script> 
<script src="jquery-ui.js"></script>

Creamos la tira de imágenes, las mismas deben tener el mismo tamaño entre si:

+------------+------------+------------+------------+
|  Frame 1   |  Frame 2   |  Frame 3   |  Frame 4   |
+------------+------------+------------+------------+

Definimos las opciones de configuración:

var optionsAnimation = { 
'widthItem' : 380, 
'widthImage' : 4560, 
'height' : 306, 
'image' : 'images/jzoo.jpg' 
}

Inicializamos el div con jZOO.

//Html
<div id="animation" style="border: 1px solid #999; margin: auto;"></div>
//Javascript
$('#animation').jzoopraxiscope(optionsAnimation);

Controlamos la animación por medio de dos simples llamadas para indicarle al plugin cuales son los controles.

//Play the animation
$('#animation').jzoopraxiscope('play');
//Stop the animation
$('#animation').jzoopraxiscope('stop');

Eso es todo el código que necesitamos 😀

El plugin es compatible con todos los navegadores modernos, y se encuentra totalmente testeado en: Chrome 18.0.1025.162, Mozilla Firefox 11.0, Internet Explorer 8, Safari 5 y Opera 11.62.

Los requerimientos mínimos son: jQuery y jQuery UI.

Web: JZoopraxiscope