Efecto DHTML cortina, para mostrar una capa poco a poco

  • Por
Un script compatible con todos los navegadores que realiza una animación DHTML para mostrar una capa, poco a poco, a modo de cortina.
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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

marlon

06/3/2009
que partes del codigo debo cambiar para poder dar el efecto de cortina a una capa de dimensiones 520*350

thydda

24/8/2011
Única repetición del efecto
El script me funciona perfecto pero me gustaría saber cómo o qué habría que hacer para que únicamente se hiciera una vez, es decir, que no hubiera bucle. He intentado añadir estructuras de control como IF or FOR de la siguiente manera pero no me funciona:

clip_top = 0
clip_right = 350
clip_bottom = 0
clip_left = 0
maximo_clip_bottom = 200

times =0

for (times=0;times<1;times++)
{
function cortina(){
clip_bottom += 1
clip_bottom = clip_bottom % maximo_clip_bottom
xClip ("textoDibujos", clip_top, clip_right, clip_bottom, clip_left)

setTimeout("cortina()",25)

}

window.onload = cortina;
}

No sé dónde debo escribir la variable "times" para que no la actualice a 0 en cada lectura o, cómo debo realizar el control para que únicamente me realice el efecto una sola vez al cargar la página.

Espero alguna respuesta

Muchas gracias de antemano

Saludos,
Zaida

Cris

28/1/2012
Para que se ejecute sólo una vez
Hola hydda / Zaida; imagino que ya tendrás la solución, pero posteo esto aquí por si alguien más quisiera integrar este efecto cortina sin bucle.
Para que se ejecute sólo una vez, ela condición IF que has de poner dentro del script ha de estar justo después de... function cortina() y salirte del script con "return false;".

Si te fijas la condición ha de ser que clip_bottom sea 1 unidad menor o igual que el valor que se le haya puesto a la variable "maximo_clip_bottom", que en el ejemplo era 90, si hubiera sido 500 entonces en la condición IF hubiera puesto 499:

function cortina(){
if (clip_bottom >= 89) {return false;}

Espero haber sido útil. Saludos