Rolagem com fundo transparente com CSS

CSS
3 comentários
Rolagem com fundo transparente com CSS é uma técnica que vai surpreender seus visitantes! Conheça!

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.

Este é um artigo traduzido do original “CSS trick for a scrolling transparent background effect“, do blog FiveFingerCoding, e sofreu algumas adaptações.

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!