Analizamos la librería que nos permite crear animaciones CSS, por medio de Javascript, de una forma muy sencilla.
Empezamos por decir que esta librería nos ayuda a crear animaciones CSS utilizando como lenguaje Javascript para alterar los atributos de estilos de una manera suavizada y a lo largo del tiempo, lo que permite crear el efecto de animación. La gran ventaja de utilizar Javascript supone que podremos visualizar las animaciones en cualquier navegador actual.
La última versión a la hora de escribir este artículo es la 0.2 y su peso es de 25kb. Realmente es un peso bastante reducido, al menos para las posibilidades de las librerías, y gracias a ello no supondrá un problema para nuestro servidor y ni para los clientes que tengan que descargar el código fuente a la hora de visualizar el sitio.
Podemos descargar jsAnim desde el enlace: http://jsanim.com/
Instalación de la librería jsAnim
Lo primero que tenemos que hacer es descomprimir la carpeta donde viene jsAdmin y subirla a nuestro servidor. Una vez subida tenemos que colocar el siguiente código en la cabecera de nuestra página para que pueda ser accesible el script de las librerías.<script type="text/javascript" src="ruta_al_archivo/jsAnim.js"> </ script>
Como podemos ver, vamos a trabajar con Javascript por lo que puede ser util disponer de un archivo .js para realizar nuestras funciones, en ese caso incluiríamos dicho archivo desde la cabecera, de la misma forma que hemos añadido la librería.
Una vez incluidos los archivos, comenzaremos a crear nuestras funciones en el nuevo archivo .js que hemos creado. Lo primero que debemos de hacer es crearnos una instancia a un objeto jsAnimManager. Este objeto controla la animación de varios objetos.
var manager= new jsAnimManager();
Casi todas las propiedades de cualquier elemento de una página se pueden animar pero para ello es necesario crear primero un objeto jsAnimObject, indicando el identificador del elemento de la página que deseamos animar:
var anim=manager.createAnimObject(?id_del_elemento?);
Una vez que hemos creado el objeto, nos queda animar una propiedad del elemento:
anim.add({property: Prop.top, from: 50, to: 500, duration: 2000});
La linea de código anterior inicializa la animación, que parte de 50 y va hacia 500, en dos segundos.
Con esto ya tendríamos la parte del código Javascript creada y hemos visto que es bastante sencilla.
Ahora sólo nos faltaría la parte del HTML y CSS, pero veremos que es tan simple como crear los elementos y aplicarles los estilos que queramos. En este caso vamos a animar una imagen, y lo único importante es ponerle el identificador a esa imagen igual al identificador que utilizamos para acceder al elemento desde el código Javascript.
Código CSS:
.ejemp{
witdh:600px
backgroud-color: green;
}
Código HTML:
<div class=ejemp>
<img src="images/figura.gif" id="id_del_elemento" />
</div>
Con esto ya nos funcionaría nuestra animación. A continuación colocamos el código completo de un primer ejemplo de jsAnim en un único archivo HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="jsAnim.js"> </script>
<script type="text/javascript">
function animacion() {
var manager= new jsAnimManager();
shroom = document.getElementById("elementId");
shroom.style.position = "relative";
var anim = manager.createAnimObject("elementId");
anim.add({property: Prop.left, to: 450, duration: 2000});
}
</script>
<title>Ejemplo animacion con jsAnim</title>
</head>
<body>
<div class="ejemp" style="border: medium solid Fuchsia; width: 600px; height: 200px;">
<img src="images/figura.jpg" id="elementId" />
</div>
<button onclick="animacion()">Animate!</button>
</body>
</html>
Podemos ver el ejemplo funcionando en una página aparte.
En el siguiente articulo complicaremos un poco más el ejemplo para realizar otros movimientos.