Código :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'></script> <script type="text/javascript" src="http://cristiangartner.com/jquery.spritely-0.5.js"></script>
Creamos un script para indicar nuestra animación. #blue es lo que conecta con el div en html.
Código :
<script type="text/javascript"> (function(ablue){ $(document).ready(function(){ $('#blue') .sprite ({fps:15, no_of_frames:43}) }); })(jQuery); </script>
Creamos nuestro div con el ID que se colocó en el JS, en este caso #blue.
Código :
<div id="blue"></div>
Generamos el estilo de ese <div> el cual tiene una imagen en bucle horizontal que mostrará cada frame.
Código :
#blue { width: 212px; height: 148px; background-image: url(http://cristiangartner.com/blue.png); }
No hay comentarios:
Publicar un comentario