Implementa efectos especiales fácilmente con Script.aculo.us

No me gusta usar, en la medida de lo posible, tecnología Flash en mis desarrollos y desde hace unos años, cuando es necesario por requerimiento del proyecto usar algún efecto o animación, suelo hacerlo con Script.aculo.us; esta hace uso de otra biblioteca, Prototype.

En mi caso suele ser un recurso muy sencillo, rápido y faćil de implementar, logrando en pocos minutos buenos efectos y sin comprometer la usabilidad del la página.

Cómo usar Script.aculo.us

Primero hay que descargar, el archivo ZIP que contiene la biblioteca Script.aculo.us y Prototype, ejemplos, documentación y código fuente, y subirlo al servidor.

Segundo hay que enlazar Script.aculo.us y Prototype en la sección HEADER del HTML:

<script src="prototype.js" type="text/javascript"></script>

<script src="scriptaculous.js" type="text/javascript"></script>

Aplicando efectos al contenido

En este caso se usará algún efecto para hacer aparecer el contenido, para esto primero hay que aplicar un estilo que oculte el contenido del DIV:

<div id="welcome-text" style="display:none">

</div>

Luego por Javascript aplicar el efecto deseado, que podría hacer que hiciera aparecer el objeto creciendo, en cuyo caso:

Effect.Grow('welcome-text');

O que apareciera:

Effect.Appear('welcome-tex');

También, dependiendo del efecto, existen otros valores adicionales para controlar la visualización como en este caso, el tiempo:

Effect.Appear('welcome-tex', { duration: 3.0 });

Cómo se ejecutan los efectos

Los efectos se disparan por medio de eventos en Javascript, la forma de hacerlo va a depender de cuando deben ser activados. Por ejemplo si es al cargarse la página: OnLoad, si es al pasar el mouse: OnMoseOver, etc.

La lista de efectos es larga y las posibilidades de uso sólo están limitadas por la imaginación.

Avisar si el Javascript está deshabilitado

Demás está decir que si el Javascript está deshabilitado en el navegador, no va funcionar ningún efecto ni nada implementado con esta biblioteca u otro Javascript presente en la página, para esto se puede agregar código adicional en la sección BODY, así mostrará un mensaje avisando de esto al usuario:

<noscript>

<div style="color:#fff; text-align:center; width:100%; position:absolute; top:200px">

<p>El Javascript est&aacute; deshabilitado.</p>

<p>Para la correcta visualización del contenido de esta p&aacute;gina, es necesario habilitarlo</p>

</div>

</noscript>

Contenido relacionado:

• Script.aculo.us: script.aculo.us
• Prototype: www.prototypejs.org
• Documentación y demostraciones: wiki.github.com/madrobby/scriptaculous