Rolagem com fundo transparente com CSS
Desde que o CSS foi criado, muita coisa mudou, atualizações foram feitas, especificações criadas, elementos revisados, enfim, a tecnologia evoluiu e vem evoluindo. O CSS alterou para muito melhor o modo como o desenvolvimento web é feito, deu ensejo à técnica de criação em camadas, dentre outras coisas.
E a comunidade CSS a cada dia desenvolve uma técnica nova, uma nova e melhor maneira de se fazer algo, um jeito diferente de sair de uma “enrascada CSS”, maneiras inovadoras de realizar algum efeito. É o caso da técnica de rolagem com fundo transparente com CSS. Uma técnica que confere um efeito muito peculiar, permitindo que uma imagem de background vá surgindo à medida em que a pessoa rola a barra de rolagem ao fundo da página.
Como a rolagem com fundo transparente funciona
Para realizar o efeito de rolagem com fundo transparente, são necessários 2 arquivos:
- Uma imagem PNG transparente. A imagem deve ter dois conjuntos de gráficos: o que você quer mostrar antes de rolagem e que aparece quando se vai chegando ao final da página. Cada grupo deve ser uma cor diferente.
Veja o PNG da demonstração(infelizmente o site com o PNG saiu do ar). - Uma imagem em degradê. O truque é usar as duas cores do PNG transparente para criar o gradiente.
Os scrolls do gradiente sob o PNG transparente. Porque ele corresponde às cores do PNG, cada conjunto de imagens desaparece dependendo de qual parte do gradiente vão “chegando”.
HTML e CSS da rolagem com fundo transparente
Será necessária uma estrutura com 2 “divs-base”, como segue:
<html> <head> <title>Rolagem com fundo transparente com CSS</title> </head> <body> <div id="wrapper"> <div id="container"> </div> </div> </body> </html>
O CSS de body (que precisa “zerar os elementos”, como explicado no artigo de CSS Mínimo), deve ser da seguinte forma:
body { background: #900 url(gradient-tile.jpg) repeat-x bottom left; // hexadecimal é a mesma cor da imagem }
Para a div “wrapper”, o CSS:
#wrapper { background-attachment: fixed; background: url(transparency.png) repeat-x center bottom; width: 100%; } * html #wrapper { background-image: none; } /* IE6 */
É um CSS simples, maiores explicações não são necessárias, fora o fato de a largura da wrapper ser definida em 100% para o PNG transparente aparece em toda a largura da janela do navegador.
E o CSS da div “container”:
#container { width: 750px; margin: 0 auto; background-color: #000; }
A largura de #container pode ser qualquer uma que se adapte ao seu layout (alguns preferem o padrão de 960px). Para o exemplo, está um pouco menor para que o efeito possa ser visto com mais clareza. A cor de fundo, também, pode ser o que quiser. As margens esquerda e direita são definidas como “auto” para centralizar a div na janela do navegador.
Observações sobre rolagem com fundo transparente (e o IE6)
Se você não tem conteúdo suficiente na div container para fazer scroll, o efeito não acontecerá e o que será visto é somente a cor de fundo. A solução é definir uma altura mínima na div container para forçar a rolagem, independentemente da quantidade de conteúdo.
Sobre a transparência do PNG, o IE6 não dá suporte à transparências… No caso, existem diversos scripts e macetes em CSS para sanar este bug, dentre eles o filtro AlphaImageLoader.
Como foi visto, há um hack para IE6 em #wrapper, mas não podemos negligenciar o fato de o IE6 não suportar a propriedade min-height (para o caso de acontecer o explicado no parágrafo anterior). Se for o seu caso, experimente usar o Tan Hack, que faz com que o IE6 interprete “height” como “min-height”.
Mas, sinceramente, o efeito só tem graça numa página extensa, quando o visitante é surpreendido com o efeito somente no fim da rolagem da tela, não é? ;-)
E aí, gostou? Comente!
Muito legal o efeito.
Uma bela aplicação das noções de cor, luz e sombra. Parece aqueles truques visuais da época da “invenção” do cinema.
Tinha visto uma técnica destas, bem mais simples, muuuito nas antigas.
O bg do body, com a imagem em degradê, era fixed bottom, e o texto, da cor mais escura do degradê.
Ao rolar a página o texto ia surgindo…
muito boom esse efeito cara, cara. Em breve vou por no ar os artigos do meu site. Eu admiro os profissionais que compartilham conhecimento, acho q esse é o barato.. compartilhar conhecimento é uma forma de interagir com o universo. Slogan do meu site
Parabéns…
Tow querendo bolar um troço no CSS.. se puder me passa um email.. duas cabeças pensam que melhor juntas;; auhauahuaha
@ Acelio,
@ Marcio Sales
Obrigado pela participação, pessoal! Quaisquer dúvidas sobre este e outros assuntos, basta comentarem! Abraços!