Ejemplo de animación html5 + js

En esta sección se resolverán temas de diseño gráfico, como uso de herramientas como photoshop, illustrator, herramientas para prototipado, herramientas de diseño web, entre otros.

Moderator: julianmartinez16

Post Reply
User avatar
xacarana
Site Admin
Posts: 975
Joined: Fri Jan 15, 2016 6:13 pm

Ejemplo de animación html5 + js

Post by xacarana » Mon Oct 31, 2016 2:20 pm

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

Image

Image

Image

Image

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});
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

Post Reply