Scriptaculous: Los efectos (1)

El uso de frameworks, librerías JavaScript que permiten incluir efectos, controles de AJAX y otras sutilezas, se está haciendo cada vez más común. Actualmente, hay varios disponibles (mootools, jquery, Ruby on Rails) y, por lo general, los agregamos como parte de algún hack pero muy raramente les prestamos atención.

Una de las más difundidas es prototype que generalmente se combina con script.aculo.us; juntas, permiten utilizar, por ejemplo, LightWindow. Son muchos los sitios de Blogger que las incluyen y son parte integral de Wordpress ya que es utilizada por innumerables plugins.

Lo que no parece ser muy conocido (o por lo menos muy utilizado) es que este tipo de scripts poseen un nucleo de funciones que van mucho más allá y que, una vez que las insertamos en nuestra página web, están a nuestra disposición, multiplicando las posibilidades de crear efectos muy sencillamente.

En mi caso, utilizo las conocidas prototype + scriptaculous + effects que se cargan para poder crear ventanas modales; otros las utilizan para mostrar rankings o la navbar de Blogger. En todos los casos, las descargamos, las alojamos en algún servidor propio y las incluimos en la plantilla antes de </head>:

<script src="URL/prototype.js" type="text/javascript" />
<script src="URL/scriptaculous.js?load=effects" type='text/javascript" />

Si no podemos o no queremos descargar los scripts, podemos usar los que provee la Wiki de script.aculo.us:

http://wiki.script.aculo.us/javascripts/prototype.js
http://wiki.script.aculo.us/javascripts/scriptaculous.js

Una vez que los tenemos agregados al blog, ya disponemos del nucleo de efectos visuales.

Estos efectos son seis: opacidad, escala, transformación, movimiento, resaltado y paralelo. Y la mayoría de ellos son muy sencillos de implementar; sólo necesitamos un enlace donde poder hacer click y poner el contenido sobre el que queremos crear el efecto dentro de un bloque DIV al que le damos un nombre único mediante el atributo ID. En general, sería algo así:

<a href="javascript:void(0);" 
onclick="new Effect.CUAL("nombre",parámetros,opciones);return false;">
ENLACE</a
>

.......

<div id="nombre">
... el contenido ...
</div>

donde CUAL será el efecto a usar y nombre el identificador.

Todos los efectos poseen una serie de parámetros por defecto que pueden modificarse, por ejemplo:

duration: el tiempo del efecto en segundos (por defecto es 1.0)
delay: cantidad de segundos antes de comenzar el efecto (por defeto es 0.0)
fps: frames por segundo (por defecto 25, máximo 100)

Empecemos mirando los tres más sencillos:

La única variación de estos ejemplos es que, en lugar de utilizar el evento onclick podemos utilizar cualquier otro evento de JavaScript:

onclick="new Effect.CUAL("nombre",parámetros,opciones);return false;"

onmouseover="new Effect.CUAL("nombre",parámetros,opciones);return false;"

onmouseout="new Effect.CUAL("nombre",parámetros,opciones);return false;"