Vamos a ver un ejemplo de script con Javascript para mostrar una capa poco a poco. Es un efecto llamado comúnmente "cortina", basado en mostrar un elemento línea a línea. El ejemplo lo vamos a desarrollar utilizando las librerías X_Library, que sirven para hacer DHTML compatible para todos los navegadores.

Hemos intentado simplificar el ejercicio, que luego vamos a utilizar para hacer efectos de cortina más avanzados. El resultado final del ejemplo, hasta donde vamos a llegar en este artículo, se puede ver en una página aparte.

Referencia: Explicamos las X_Library en un artículo anterior en DesarrolloWeb.com y tenemos varios ejemplos de su uso. Tenemos varios manuales de Javascript que pueden interesar a las personas que no dominen el lenguaje.

La capa a mostrar con el efecto cortina

En el cuerpo de la página colocaremos la capa a mostrar con la cortinilla. Es una capa normal, con unos estilos y un contenido.

<div id="c1" style="position:absolute; left:50px; top:80px; visibility:visible; clip: rect(0,280,0,0); background-color:e0e0e0">
Mis queridos amigos
<br>
Esta capa está puesta para ver cómo funciona
<br>
Estas líneas se muestran poco a poco
<br>
y esta es la última línea...
</div>

Merece la pena llamar la atención sobre el atributo CSS clip, definido en la capa. Este atributo sirve para recortar el contenido de una capa y evitar que se muestre. En este caso estamos indicando que no se debe mostrar nada de esa capa, porque la animación de cortinilla debe comenzar sin que se vea nada, para mostrarse poco a poco.

Referencia: Podemos conocer los diversos estilos CSS que hemos utilizado en el Manual de Hojas de Estilo en Cascada. El atributo clip se explica en detalle en un artículo.

El Javascript para hacer la cortinilla

Lo primero será importar el archivo correspondiente de la librería X-Library, en este caso x_core.js, que contiene las funciones básicas.

<script type='text/javascript' src='../x/x_core.js'></script>

A continuación vamos a crear una serie de variables globales para guardar en todo momento el recorte correspondiente, que debe aplicarse en la capa para mostrar la animación.

clip_top = 0
clip_right = 280
clip_bottom = 0
clip_left = 0

La animación se produce al cambiar las variables de recorte en un bucle, actualizando el recorte en cada una de las iteraciones. La capa, que en principio está recortada por completo, se irá mostrando desde arriba hacia abajo, poco a poco, hasta que se vea entera.

Tenemos que saber cuándo hemos mostrado la capa entera, para poder terminar el bucle. Para ello, hemos definido otra variable global que guarda el máximo clip que tenemos que hacer por la parte de abajo.

maximo_clip_bottom = 90

Ahora sólo queda crear la función que se va a encargar de realizar la iteración. Esta función, como ya hemos adelantado, tiene básicamente que actualizar las variables de recorte y aplicar dicho recorte a la capa.

function cortina(){
    clip_bottom += 1
    clip_bottom = clip_bottom % maximo_clip_bottom
    xClip ("c1", clip_top, clip_right, clip_bottom, clip_left)
    setTimeout("cortina()",25)
}

En la primera línea se actualiza el valor de recorte clip_bottom, incrementando su valor en 1.

En la segunda línea se hace una operación matemática (%, el resto de la división) para que la variable de recorte clip_bottom se mantenga dentro de los valores permitidos (entre 0 y maximo_clip_bottom, que en este caso es 90). Con esta operación, cuando clip_bottom vale 90, se cambia su valor por el resto de la división entre 90, que es 0. Con ello, si se repiten las llamadas a esta función, la variable clip_bottom siempre fluctuará entre 0 y 90.

En la tercera línea se utiliza la función xClip, que forma parte de la librería X_Library, para aplicar el recorte. A la función se le pasa las variables globales que almacenan el recorte que hay que efectuar.

En la última línea se llama a la función con un retardo de 25 milisegundos. En las sucesivas llamadas a la función es como se realiza la animación. El retardo entre llamadas a la función es necesario para que el navegador no se quede bloqueado en la visualización de la animación. Si no se hace con este retardo, el ordenador se metería en un bucle infinito y no nos permitiría hacer nada en la página, porque todos sus recursos estarían ocupados con la animación.

Un último detalle. Para que la animación se ponga en marcha nada más terminar la carga de la página, debemos asociar el evento ONLOAD a la función cortina(), con la siguiente línea de Javascript.

window.onload = cortina

El ejercicio se puede ver completo en una página aparte.