
Luego debemos descargar la librería spritely y jquery. Por último implementar el siguiente código.
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.spritely.js"></script>
<script type="text/javascript">
window.onload = function()
{
$('#personaje').sprite({fps: 12, no_of_frames: 5});
}
</script>
<style type="text/css">
#personaje{
background-image: url(img/monsterSpriteSheet.png);
background-repeat: no-repeat;
width: 110px;
height: 110px;
background-color: red;
}
</style>
</head>
<body>
<div id="personaje"></div>
</body>
</html>
Nota: Tenga presente los siguientes enlaces, para entender mejor que pasa en el código de la animación.
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script type="text/javascript" src="js/jquery.spritely.js"></script>
<script type="text/javascript">
window.onload = function()
{
$('#personaje').sprite({fps: 12, no_of_frames: 7});
TweenLite.to($('#personaje'), 5, {opacity:0,left:"490px",ease: Bounce.easeIn});
}
</script>
<style type="text/css">
#personaje{
position: absolute;
background-image: url(img/monsterSpriteSheet.png);
background-repeat: no-repeat;
width: 100px;
height: 100px;
}
#escena{
width: 600px;
height: 110px;
background-color: cyan;
position: relative;
}
#pasto{
position: absolute;
z-index: 1;
width: 100%;
height: 20px;
background-color:green;
bottom:0px;
left: 0px;
}
</style>
</head>
<body>
<div id="escena">
<div id="pasto"></div>
<div id="personaje"></div>
</div>
</body>
</html>