Neste workshop de DHTML vamos criar uma apresentação de slides, no qual se vão mostrando várias imagens em um mesmo espaço, que serão visualizados com um efeito cortina. Tudo isso com Javascript e CSS compatível com todos os navegadores.

Ou seja, vamos ter várias imagens em várias camadas, colocadas no mesmo espaço da página, que se mostrarão uma atrás da outra. O efeito cortina trata simplesmente de mostrar a imagem linha a linha, ao invés de aparecer de uma só vez.

O melhor para saber exatamente o que desejamos fazer é ver o exemplo em funcionamento.

Nota: Este exercício é continuação de outro que se explica como fazer um efeito cortina com DHTML. No exercício anterior nos limitávamos a realizar o efeito cortina sobre uma camada. Nesta ocasião temos várias camadas e o efeito cortina se aplica sobre elas, uma atrás da outra, para realizar a apresentação de imagens com o efeito cortina. Também há que assinalar que este artigo utiliza as biblliotecas X-Library, que foram comentadas anteriormente em CriarWeb.com.

O HTML e CSS

Vejamos primeiro como criar o HTML, junto com CSS, que nos servirá para dispor de várias camadas na mesma posição.

Primeiro, definimos um CSS que indica a posição e outras características das camadas que vão conter as imagens.

<style type="text/css">
.estilocapa {position:absolute; left:50px; top:80px; visibility:visible; clip: rect(0,155,0,0);}
</style>

Cabe destacar que neste caso todas as camadas estão visíveis, apesar de termos aplicado um cliping (recorte) por isso não se mostra nenhuma parte da camada. Logo, utilizaremos este atributo de CSS (clip) para variar ese recorte da imagem, de modo que se mostre linha a linha.

Agora veremos as camadas que vão participar em nossa apresentação de slides. Em cada uma das camadas introduzimos uma das imagens que vamos 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>

No total temos 9 camadas, que chamamos com os nomes c1, c2... c9.

Javascript para realizar a apresentação de slides

O primeiro será incluir as bibliotecas X-Library na página, para ter acesso às funções DHTML que vamos utilizar no exercício.

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

Agora vejamos o código necessário para realizar a animação, por partes, para tratar de explica-lo de forma simples. Lembre que este exemplo vem comentado anteriormente no artigo Efeito DHTML cortina, para mostrar uma camada pouco a pouco.

Primeiro, definimos uma série de variáveis globais que vamos utilizar ao longo da execução do script.

velocidad = 5
clip_top = 0
clip_right = 155
clip_bottom = 0
clip_left = 0
maximo_clip_bottom = 80
contador_zindex = 0

A variável velocidade controla a rapidez do script. Quanto mais velocidade tiver, mais lento se realizará o efeito. Utilizaremos esta variável na sentença setTimeout() para indicar os milésimos de segundos que devem transcorrer entre cada execução do loop que realiza a animação.

As variáveis clip_top, clip_right, clip_bottom, clip_left, que salvam o recorte que se deve aplicar à camada em cada execução do loop. A seguinte variável, chamada maximo_clip_bottom, se utiliza para saber o momento no qual há que deter o recorte da imagem, por já ter chegado a mostrar por completo.

Por último, a variável contador_zindex, serve para mostrar a camada que tem que se visualizar em cada momento por cima das outras camadas que há na página. Z-Index é um atributo de folhas de estilo em cascata que serve para definir que camadas se mostram na parte de cima e quais na de baixo, no caso de que estas camadas se encontrarem sobrepostas em um mesmo lugar. Este contador, que se incrementa entre cada execução do script, se utiliza para atribuir o atributo Z-Index na camada que há que mostrar em cada momento. A maior Z-Index da camada, mostra-se mais acima.

Além disso, vamos criar um array de nomes das camadas que participam neste efeito.

capas_images = new Array("c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9")
imagen_acual = 0

Utilizamos este array para conhecer o identificador da camada a mostrar em cada momento. A variável imagen_actual serve para salvar o índice do array que corresponde com a camada a mostrar.

Agora veremos a função que se utiliza para mostrar as camadas uma por uma e com o feito cortina. Esta função se chamará a si mesma com um atraso, para criar o loop de animação.

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)
}

A função começa por aumentar o valor de clip_bottom, para mostrar um pouco mais da imagem no recorte que vai tornar possível o efeito cortina.

A seguir, comprova-se se chegou ao máximo calor de recorte, cujo caso se supõe que a imagem se mostrou por completo e teria que passar à seguinte imagem. Neste caso, restauramos o valor clip_botom e atribuímos um zero e aumentamos em um a imagem atual, para passar à seguinte camada do array de camadas. No caso de já ter chegado no final do array de camadas, volta-se à primeira imagem.

Posteriormente, ainda dentro do if que controla se uma imagem foi mostrada por completo, atualiza-se o atributo Z-Index da camada atual, para que se mostre na parte da frente e aumenta-se o contador de Z-Index para que a próxima camada mostre-se diante da atual.

Em cada execução da função, atualiza-se o valor de clip da camada atual, atribuindo os valores armazenados nas variáveis globais que vimos anteriormente.

Por último, chama-se outra à função cortina para produzir o loop. A chamada se realiza com um atraso, que vem definido pela variável global velocidade.

Para que a animação comece a funcionar assim que terminar o carregamento da página, devemos associar o evento ONLOAD à função cortina(), com a seguinte linha de Javascript.

window.onload = cortina

Pode-se ver o resultado final neste link.