Veremos um exemplo de script com Javascript para mostrar uma camada pouco a pouco. É um efeito chamado normalmente de "cortina", baseado em mostrar um elemento linha a linha. Vamos desenvolver o exemplo utilizando a biblioteca que serve para fazer DHTML compatível para todos os navegadores.

Tentamos simplificar o exercício,, que logo vamos utilizar para fazer efeitos de cortina mais avançados. O resultado final do exemplo, até onde vamos chegar nesse artigo, pode se ver em uma página a parte.

Referência: Explicamos as X_Library em um artigo anterior em CriarWeb.com e temos vários exemplos de seu uso. Temos vários manuais de Javascript que podem interessar às pessoas que não dominarem a linguagem.

A camada a mostrar com o efeito cortina

No corpo da página colocaremos a camada a mostrar com a cortina. É uma camada normal, com uns estilos e um conteúdo.

<div id="c1" style="position:absolute; left:50px; top:80px; visibility:visible; clip: rect(0,280,0,0); background-color:e0e0e0">
Meus queridos amigos
<br>
Esta camada está posta para ver como funciona
<br>
Esta linhas se mostram pouco a pouco
<br>
e esta é a última linha...
</div>

Vale a pena chamar a atenção sobre o atributo CSS clip, definido na camada. Este atributo serve para recortar o conteúdo de uma camada e evitar que se mostre. Neste caso estamos indicando que não se deve mostrar nada dessa camada, porque a animação de cortina deve começar sem que se veja nada, para que se mostre pouco a pouco.

Referência: Podemos conhecer os diversos estilos CSS que utilizamos no Manual de Folhas de Estilo em Cascata. O atributo clip é explicado detalhadamente em um artigo.

O Javascript para fazer a cortina

O primeiro será importar o arquivo correspondente da biblioteca X-Library, neste caso x_core.js, que contém as funções básicas.

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

A seguir vamos criar uma série de variáveis globais para salvar em todo momento o recorte correspondente, que deve se aplicar na camada capa para mostrar a animação.

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

A animação se produz ao mudar as variáveis de recorte em um loop, atualizando o recorte em cada uma das repetições. A camada, que à princípio está recortada por completo, irá se mostrando desde acima até abaixo, pouco a pouco, até que se veja inteira.

Temos que saber quando mostramos a camada inteira, para poder terminar o loop. Para isso, definimos outra variável global que salva o máximo clip que tivermos que fazer pela parte de abaixo.

maximo_clip_bottom = 90

Agora só resta criar a função que vai se encarregar de realizar a repetição. Esta função, como já adiantamos, tem basicamente que atualizar as variáveis de recorte e aplicar tal recorte à camada.

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

Na primeira linha se atualiza o valor de recorte clip_bottom, incrementando seu valor em 1.

Na segunda linha se faz uma operação matemática (%, o resto da divisão) para que a variável de recorte clip_bottom se mantenha dentro dos valores permitidos (entre 0 e maximo_clip_bottom, que neste caso é 90). Com esta operação, quando clip_bottom vale 90, muda-se seu valor pelo resto da divisão entre 90, que é 0. Com isso, se se repetem as chamadas a esta função, a variável clip_bottom sempre flutuará entre 0 e 90.

Na terceira linha utiliza-se a função xClip, que faz parte da biblioteca X_Library, para aplicar o recorte. Passamos as variáveis globais à função que armazenam o recorte que há que efetuar.

Na última linha chama à função com um atraso de 25 milésimos de segundos. Nas sucessivas chamadas à função é como se realiza a animação. O atraso entre chamadas à função é necessário para que o navegador não fique bloqueado na visualização da animação. Se não se faz com este atraso, o computador colocaria um loop infinito e não nos permitiria fazer nada na página, porque todos seus recursos estariam ocupados com a animação.

Um último detalhe. Para que a animação entre em funcionamento 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

O exercício pode se ver completo em uma página a parte.