Flocos de Neve na sua página

27 Dezembro 2008 Escrito por Gonçalo Martins

Pela altura de Natal e Ano Novo, muitas são as páginas de Internet que colocam efeitos alusivos à época online. Foi no seguimento disto que aqui à dias fui abordado por um cliente para lhe colocar no website, um efeito de Flocos de Neve, no entanto só no header, e por trás do conteúdo escrito do header!

A primeira coisa que me passou pela cabeça, foi implementar algo utilizando o potencial do formato .GIF. Mas a efeito não ficava particularmente apelativo ao olho. Só me restavam outras duas opções:

1. Utilizar única e exclusivamente javascript para gerar flocos de neve aleatórios, através de imagens .png-8 ou .gif;
2. Utilizar Flash

Acedo às estatísticas do cliente e verifico que a percentagem de utilizadores que acede ao site com o javascript desabilitado é estranhamente maior do que aquela que não possui Flash.

Decido então optar por algo no meio das duas, algo que me oferecia compatibilidade com todos os browsers. Para grande contentamento meu verifico que a técnica que utilizei, estava a ser utilizada pela Internet fora para aplicar este mesmo género de efeito em inúmeros websites.

Exemplo

Download

Vou então demonstrar como criar o efeito que apresento no exemplo.

1. Estrutura

A estrutura a Utilizar será a seguinte:

HTML:

//conteudo do ponto 2

</div>
</div>

<div id="contheader">
//conteudo do header
</div>

CSS:

#paisagem{
position:absolute;
z-index:1;
background: url('/natalheader.gif') no-repeat;
height:136px;;
width:1207px;

}
#snow_flake{
position:absolute;
z-index:2;
//margin-top:-65px;
height:80px;
}
#contheader{
position:absolute;
z-index:3;
}

A div paisagem vai ser a responsável por mostrar a imagem de fundo. A div snow_flake vai ser a responsável por mostrar os flocos de neve. A div contheader, é onde o conteúdo escrito do header aparece, por cima dos flocos de neve.

2. Utilizar o FLASH

Os scripts anteriores são essenciais para o bom funcionamento do efeito em todos os browsers, e para a aplicação deste mesmo efeito flash em páginas que já contenham outros conteúdos dentro da tág <embed>

De seguida o código que faz com que os flocos de neve apareçam:

No entanto agora possuímos um problema e se o Javascript do Browser estiver desabilitado? É necessário utilizar um work-arround, pelo que a introdução do código que se segue é uma obrigação:

Para mais informação sobre esta técnica pode visitar a página da Adobe.

Os ficheiros necessários à implementação desta técnica são disponibilizados gratuitamente, no arquivo que lhe forneço. Juntamente com um exemplo funcional.

Exemplo

Download



Celso Azevedo Dezembro 28, 2008	Parabéns, gostei muito do tutorial! Para wordpress existe um plugin que faz com que a neve caia em toda a pagina, no entanto não sei se é compatível com todos os browsers. Cumprimentos


Uilson Dezembro 16, 2010	Mas como instalar no site?

Flocos de Neve na sua página

1. Estrutura

2. Utilizar o FLASH

Artigos Relacionados

Nuvem de Tags