O HTML e CSS Apresentao de Slides CSS a abreviatura para Cascading Style Sheets.

Folha de Estilos em Cascata

CSS uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais. Aguarde e voc ver!

Vejamos primeiro como criar o HTML, junto com CSS, que nos servir para dispor de vrias camadas na mesma posio. Primeiro, definimos um CSS que indica a posio e outras caractersticas das camadas que vo 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 esto visveis, apesar de termos aplicado um cliping (recorte) por isso no 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 vo participar em nossa apresentao 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 apresentao de slides O primeiro ser incluir as bibliotecas X-Library na pgina, para ter acesso s funes DHTML que vamos utilizar no exerccio. <script type='text/javascript' src='../x/x_core.js'></script> Agora vejamos o cdigo necessrio para realizar a animao, 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 srie de variveis globais que vamos utilizar ao longo da execuo do script. velocidad = 5 clip_top = 0 clip_right = 155 clip_bottom = 0 clip_left = 0

maximo_clip_bottom = 80 contador_zindex = 0 A varivel velocidade controla a rapidez do script. Quanto mais velocidade tiver, mais lento se realizar o efeito. Utilizaremos esta varivel na sentena setTimeout() para indicar os milsimos de segundos que devem transcorrer entre cada execuo do loop que realiza a animao. As variveis clip_top, clip_right, clip_bottom, clip_left, que salvam o recorte que se deve aplicar camada em cada execuo do loop. A seguinte varivel, 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 varivel contador_zindex, serve para mostrar a camada que tem que se visualizar em cada momento por cima das outras camadas que h na pgina. 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 execuo 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. Alm 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 varivel imagen_actual serve para salvar o ndice do array que corresponde com a camada a mostrar. Agora veremos a funo que se utiliza para mostrar as camadas uma por uma e com o feito cortina. Esta funo se chamar a si mesma com um atraso, para criar o loop de animao. 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 funo comea por aumentar o valor de clip_bottom, para mostrar um pouco mais da imagem no recorte que vai tornar possvel o efeito cortina. A seguir, comprova-se se chegou ao mximo calor de recorte, cujo caso se supe que a imagem se mostrou por completo e teria que passar seguinte imagem. Neste caso, restauramos o valor clip_botom e atribumos 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 prxima camada mostrese diante da atual. Em cada execuo da funo, atualiza-se o valor de clip da camada atual, atribuindo os valores armazenados nas variveis globais que vimos anteriormente. Por ltimo, chama-se outra funo cortina para produzir o loop. A chamada se realiza com um atraso, que vem definido pela varivel global velocidade. Para que a animao comece a funcionar assim que terminar o carregamento da pgina, devemos associar o evento ONLOAD funo cortina(), com a seguinte linha de Javascript. window.onload = cortina