Efecto DHTML de pase de diapositivas en el que se van mostrando una serie de imágenes con un efecto cortina.
En este taller de DHTML vamos a crear un pase de diapositivas, en el que se mostrarán varias imágenes en un mismo espacio, que se irán visualizando con un efecto cortina. Todo ello con Javascript y CSS compatible con todos los navegadores.
Es decir, vamos a tener varias imágenes en varias capas, colocadas en el mismo espacio de la página, que se mostrarán una detrás de otra. El efecto cortina trata simplemente de mostrar la imagen línea a línea, en lugar de que aparezca de golpe.
Lo mejor para saber exactamente lo que deseamos hacer es ver el ejemplo en marcha.
El HTML y CSS
Veamos primero cómo crear el HTML, junto con CSS, que nos va a servir para disponer de varias capas en la misma posición.
Primero definimos un CSS que indica la posición y otras características de las capas que van a contener las imágenes.
<style type="text/css">
.estilocapa {position:absolute; left:50px; top:80px; visibility:visible; clip: rect(0,155,0,0);}
</style>
Cabe destacar que en este caso todas las capas están visibles, aunque se les ha aplicado un cliping (recorte) por el que no se muestra ninguna parte de la capa. Luego utilizaremos este atributo de CSS (clip) para variar ese recorte de la imagen, de modo que se muestre línea a línea.
Ahora veremos las capas que van a participar en nuestro pase de diapositivas. En cada una de las capas introducimos una de las imágenes que vamos a utilizar.
<div id="c1" class=estilocapa>
<img src="images/ancares.jpg" width="155" height="80" border="0">
</div>
<div id="c2" class=estilocapa>
<img src="images/aranjp.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c3" class=estilocapa>
<img src="images/aranjuez.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c4" class=estilocapa>
<img src="images/austral.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c5" class=estilocapa>
<img src="images/basel.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c6" class=estilocapa>
<img src="images/bombay.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c7" class=estilocapa>
<img src="images/brujas.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c8" class=estilocapa>
<img src="images/bruselas.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c9" class=estilocapa>
<img src="images/burgos2.jpg" width="155" height="80" alt="" border="0">
</div>
En total tenemos 9 capas, que hemos llamado con los nombres c1, c2... c9.
Javascript para realizar el pase de diapositivas
Lo primero será incluir las librerías X-Library en la página, para tener acceso a las funciones DHTML que vamos a utilizar en el ejercicio.
<script type='text/javascript' src='../x/x_core.js'></script>
Ahora veamos el código necesario para realizar la animación, por partes, para tratar de explicarlo de una manera sencilla. Recordar que este ejemplo viene comentado anteriormente en el artículo Efecto DHTML cortina, para mostrar una capa poco a poco.
Primero definimos una serie de variables globales que vamos a utilizar a lo largo de la ejecución del script.
velocidad = 5
clip_top = 0
clip_right = 155
clip_bottom = 0
clip_left = 0
maximo_clip_bottom = 80
contador_zindex = 0
La variable velocidad controla la rapidez del script. A más velocidad, más lento se realiza el efecto. Esta variable la utilizaremos en la sentencia setTimeout() para indicar los milisegundos que deben transcurrir entre cada ejecución del bucle que realiza la animación.
Las variables clip_top, clip_right, clip_bottom, clip_left, que guardan el recorte que se debe aplicar a la capa en cada ejecución del bucle. La siguiente variable, llamada maximo_clip_bottom, se utiliza para saber el momento en el que se tiene que detener el recorte de la imagen, porque se haya llegado a mostrar por completo.
Por último, la variable contador_zindex, sirve para mostrar la capa que se tiene que visualizar en cada momento por encima de las otras capas que hay en la página. Z-Index es un atributo de hojas de estilo en cascada que sirve para definir qué capas se muestran en la parte de arriba y cuáles en la de abajo, en caso de que estas capas se encuentren superpuestas en un mismo lugar. Este contador, que se incrementa entre cada ejecución del script, se utiliza para asignar el atributo Z-Index en la capa que hay que mostrar en cada momento. A mayor Z-Index de la capa, se muestra más arriba.
Además, vamos a crear un array de nombres de las capas que participan en este efecto.
capas_images = new Array("c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9")
imagen_actual = 0
Este array lo utilizamos para conocer el identificador de la capa a mostrar en cada momento. La variable imagen_actual sirve para guardar el índice del array que corresponde con la capa a mostrar.
Ahora veremos la función que se utiliza para mostrar las capas, una a una y con el efecto cortina. Esta función se llamará a si misma con un retardo, para crear el bucle de animación.
function cortina(){
clip_bottom += 1
if (clip_bottom==maximo_clip_bottom){
clip_bottom = 0
imagen_actual += 1
if (imagen_actual == capas_images.length){
imagen_actual=0
}
xZIndex(capas_images[imagen_actual],contador_zindex)
contador_zindex ++
}
xClip (capas_images[imagen_actual], clip_top, clip_right, clip_bottom, clip_left)
setTimeout("cortina()",velocidad)
}
La función empieza por aumentar el valor de clip_bottom, para mostrar un poco más de la imagen en el recorte que va a hacer posible el efecto cortina.
A continuación se comprueba si se ha llegado al máximo calor de recorte, en cuyo caso se supone que la imagen se ha mostrado por completo y habría que pasar a la siguiente imagen. En ese caso, restauramos el valor clip_botom y asignando un cero y aumentamos en uno la imagen actual, para pasar a la siguiente capa del array de capas. En caso de que se haya llegado al final del array de capas, se vuelve a la primera imagen.
Posteriormente, todavía dentro del if que controla si se ha mostrado por completo una imagen, se actualiza el atributo Z-Index de la capa actual, para que se muestre en la parte del frente y se aumenta el contador de Z-Index para que la próxima capa se muestre delante de la actual.
En cada ejecución de la función se actualiza el valor de clip de la capa actual, asignando los valores almacenados en las variables globales que vimos anteriormente.
Por último, se llama otra vez a la función cortina para producir el bucle. La llamada se realiza con un retardo, que viene definido por la variable global velocidad.
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
Se puede ver el resultado final en este enlace.
Es decir, vamos a tener varias imágenes en varias capas, colocadas en el mismo espacio de la página, que se mostrarán una detrás de otra. El efecto cortina trata simplemente de mostrar la imagen línea a línea, en lugar de que aparezca de golpe.
Lo mejor para saber exactamente lo que deseamos hacer es ver el ejemplo en marcha.
| Nota: Este ejercicio es continuación de otro en el que se explica cómo hacer un efecto cortina con DHTML. En el anterior ejercicio nos limitábamos a realizar el efecto cortina sobre una capa. En esta ocasión tenemos varias capas y el efecto cortina se aplica sobre ellas, una detrás de otra, para realizar el pase de varias imágenes con el efecto cortina. También hay que señalar que este artículo hace uso de las librerías X-Library, que fueron comentadas anteriormente en DesarrolloWeb.com. |
El HTML y CSS
Veamos primero cómo crear el HTML, junto con CSS, que nos va a servir para disponer de varias capas en la misma posición.
Primero definimos un CSS que indica la posición y otras características de las capas que van a contener las imágenes.
<style type="text/css">
.estilocapa {position:absolute; left:50px; top:80px; visibility:visible; clip: rect(0,155,0,0);}
</style>
Cabe destacar que en este caso todas las capas están visibles, aunque se les ha aplicado un cliping (recorte) por el que no se muestra ninguna parte de la capa. Luego utilizaremos este atributo de CSS (clip) para variar ese recorte de la imagen, de modo que se muestre línea a línea.
Ahora veremos las capas que van a participar en nuestro pase de diapositivas. En cada una de las capas introducimos una de las imágenes que vamos a utilizar.
<div id="c1" class=estilocapa>
<img src="images/ancares.jpg" width="155" height="80" border="0">
</div>
<div id="c2" class=estilocapa>
<img src="images/aranjp.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c3" class=estilocapa>
<img src="images/aranjuez.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c4" class=estilocapa>
<img src="images/austral.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c5" class=estilocapa>
<img src="images/basel.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c6" class=estilocapa>
<img src="images/bombay.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c7" class=estilocapa>
<img src="images/brujas.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c8" class=estilocapa>
<img src="images/bruselas.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c9" class=estilocapa>
<img src="images/burgos2.jpg" width="155" height="80" alt="" border="0">
</div>
En total tenemos 9 capas, que hemos llamado con los nombres c1, c2... c9.
Javascript para realizar el pase de diapositivas
Lo primero será incluir las librerías X-Library en la página, para tener acceso a las funciones DHTML que vamos a utilizar en el ejercicio.
<script type='text/javascript' src='../x/x_core.js'></script>
Ahora veamos el código necesario para realizar la animación, por partes, para tratar de explicarlo de una manera sencilla. Recordar que este ejemplo viene comentado anteriormente en el artículo Efecto DHTML cortina, para mostrar una capa poco a poco.
Primero definimos una serie de variables globales que vamos a utilizar a lo largo de la ejecución del script.
velocidad = 5
clip_top = 0
clip_right = 155
clip_bottom = 0
clip_left = 0
maximo_clip_bottom = 80
contador_zindex = 0
La variable velocidad controla la rapidez del script. A más velocidad, más lento se realiza el efecto. Esta variable la utilizaremos en la sentencia setTimeout() para indicar los milisegundos que deben transcurrir entre cada ejecución del bucle que realiza la animación.
Las variables clip_top, clip_right, clip_bottom, clip_left, que guardan el recorte que se debe aplicar a la capa en cada ejecución del bucle. La siguiente variable, llamada maximo_clip_bottom, se utiliza para saber el momento en el que se tiene que detener el recorte de la imagen, porque se haya llegado a mostrar por completo.
Por último, la variable contador_zindex, sirve para mostrar la capa que se tiene que visualizar en cada momento por encima de las otras capas que hay en la página. Z-Index es un atributo de hojas de estilo en cascada que sirve para definir qué capas se muestran en la parte de arriba y cuáles en la de abajo, en caso de que estas capas se encuentren superpuestas en un mismo lugar. Este contador, que se incrementa entre cada ejecución del script, se utiliza para asignar el atributo Z-Index en la capa que hay que mostrar en cada momento. A mayor Z-Index de la capa, se muestra más arriba.
Además, vamos a crear un array de nombres de las capas que participan en este efecto.
capas_images = new Array("c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9")
imagen_actual = 0
Este array lo utilizamos para conocer el identificador de la capa a mostrar en cada momento. La variable imagen_actual sirve para guardar el índice del array que corresponde con la capa a mostrar.
Ahora veremos la función que se utiliza para mostrar las capas, una a una y con el efecto cortina. Esta función se llamará a si misma con un retardo, para crear el bucle de animación.
function cortina(){
clip_bottom += 1
if (clip_bottom==maximo_clip_bottom){
clip_bottom = 0
imagen_actual += 1
if (imagen_actual == capas_images.length){
imagen_actual=0
}
xZIndex(capas_images[imagen_actual],contador_zindex)
contador_zindex ++
}
xClip (capas_images[imagen_actual], clip_top, clip_right, clip_bottom, clip_left)
setTimeout("cortina()",velocidad)
}
La función empieza por aumentar el valor de clip_bottom, para mostrar un poco más de la imagen en el recorte que va a hacer posible el efecto cortina.
A continuación se comprueba si se ha llegado al máximo calor de recorte, en cuyo caso se supone que la imagen se ha mostrado por completo y habría que pasar a la siguiente imagen. En ese caso, restauramos el valor clip_botom y asignando un cero y aumentamos en uno la imagen actual, para pasar a la siguiente capa del array de capas. En caso de que se haya llegado al final del array de capas, se vuelve a la primera imagen.
Posteriormente, todavía dentro del if que controla si se ha mostrado por completo una imagen, se actualiza el atributo Z-Index de la capa actual, para que se muestre en la parte del frente y se aumenta el contador de Z-Index para que la próxima capa se muestre delante de la actual.
En cada ejecución de la función se actualiza el valor de clip de la capa actual, asignando los valores almacenados en las variables globales que vimos anteriormente.
Por último, se llama otra vez a la función cortina para producir el bucle. La llamada se realiza con un retardo, que viene definido por la variable global velocidad.
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
Se puede ver el resultado final en este enlace.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...