Vamos a realizar una pequeña animación usando el framework para javascript
MootoolsPrimero empezamos con la página html de nuestra animación:
.....
<div id="fxDiv" class="red">Click aquí para iniciar la animación</div>
.....
Crearemos una hoja de estilos anim.css, este archivo contiene la animación de rojo (.red) a azul (.blue).
#fxDiv {
padding: 5px;
position: absolute;
}
.red {
background-color: #f00;
left: 100px;
top: 100px;
border: 1px solid black;
}
.blue {
background-color: #00f;
left: 400px;
top: 200px;
width: 400px;
height: 400px;
border: 5px solid black;
}
Ahora el script que ejecuta la animación:
$("fxDiv").addEvent('click', function() {
var fx = new Fx.Morph($("fxDiv"),
{duration: 1000,
transition: Fx.Transitions.Sine.easeOut});
fx.start(".blue");
});
El objeto Fx.Morph recibe dos parámetros:
- Primero el elemento que se quiere animar, en este caso es un div
- Un objeto de opciones de configuración para la animación recibe varios propiedades, en este ejemplo especificamos la duración de la animación y que tipo de transición quiero para la animación. Aquí encuentras un ejemplo de las transiciones de MooTools
La página html final, vinculando los estilos y código javascript:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tween en MooTools</title>
<link type="text/css" rel="stylesheet" href="css/anim.css"></link>
</head>
<body>
<div id="fxDiv" class="red">Click Aqui para iniciar la animación</div>
<script type="text/javascript" src="js/mootools-1.2.1-core-yc.js"></script>
<script type="text/javascript" src="js/anim.js"></script>
</body>
</html>
Este es un simple ejemplo de animaciones con MooTools,
aquí puede ver muchos ejemplos más de esta gran libreria