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...
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.
Por nice00xt el 30 de Abril de 2013
Por saermaxxus el 30 de Abril de 2013
nice00xt :
Lo que hace que la animación no quede fuera de cuadro es la concordancia en los frames y el tamaño de cada cuadro, saludos...
me gusto mucho
ideal para evitar gifs.
Por vernetit el 05 de Mayo de 2013
Por sergiocastilla el 05 de Mayo de 2013
Gracias
Por Eri el 03 de Mayo de 2016