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='https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="https://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(https://cristiangartner.com/blue.png);
   }

Related posts