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.
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
Los comentarios están cerrados.