Ejemplo de animación html5 + js

[xacarana]

Librería de javascript para crear una animación
nota: Esta librería requiere tener vinculado jquery en el proyecto

http://spritely.net/documentation/

Secuencia de Imágenes de referencia









En el index.html se crea el siguiente código

Se vincula la librería de spritely

Code: Select all

	<script src="js/vendor/jquery.spritely.js"></script>

Code: Select all

	 <div class="contenido">
            <div id="personaje"></div>
          </div>

En el css se pone el siguiente código

Code: Select all

#personaje{
	background-image: url(../img/monsterSpriteSheet.png);
	background-repeat: no-repeat;
	background-color:black;
	height: 150px;
	width: 200px;
}

Y finalmente se activa la animación con el siguiente código de javascript

Code: Select all

	$('#personaje').sprite({fps: 12, no_of_frames: 3});