Comunidad de diseño web y desarrollo en internet

Animación 2D con jQuery.spritely

Hola, en esta ocasión quiero mostrarles algo muy fácil de hacer y con unos resultados excelentes, es una animación 2D realizada con Javascript, jQuery y jQuery.spritely.




Conectamos las siguientes librerías al <head>. Puedes descargar aquí la librería jQuery.spritely.

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);
   }


Y listo... :cool:

Código: http://cristiangartner.com - http://codepen.io/gartner90/pen/zCxGj

Para más detalles un videotutorial:

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate