Flocos de Neve na sua página

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.

 

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

1. Estrutura

A estrutura a Utilizar será a seguinte:

html
<div id="paisagem">
    <div id="snow_flake">  //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

javascript
<script type="text/javascript" src="/AC_RunActiveContent.js"></script>
<script language="javascript">
if (AC_FL_RunContent == 0) {
alert('Esta página requer AC_RunActiveContent.js.');
 
} else {
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
'width', '1027',
'height', '80',
'src', '/includes/snowflake',
'quality', 'high',
'pluginspage','http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
 'wmode', 'transparent',
 'devicefont', 'false',
'id', 'snowflake',
'bgcolor', '#000000',
'name', 'snowflake',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', '/includes/snowflake',
'salign', ''
);
 
 }
</script>

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:

html
<embed src="/includes/snowflake.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" play="true" loop="true" scale="showall" wmode="transparent" devicefont="false" bgcolor="#000000" name="snowflake" menu="true" allowfullscreen="false" allowscriptaccess="sameDomain" salign="" type="application/x-shockwave-flash" align="middle" width="1207" height="80">

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:

html
<noscript>
<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0' width='810' height='80' id='snowflake' align='middle'>
<param name='allowScriptAccess' value='sameDomain' />
<param name='allowFullScreen' value='false' />
<param name='movie' value='snowflake.swf' /><param name='quality' value='high' /><param name='wmode' value='transparent' /><param name='bgcolor' value='#000000' />            <embed src='snowflake.swf' quality='high' wmode='transparent' bgcolor='#000000' width='810' height='80' name='snowflake' align='middle' allowScriptAccess='sameDomain' allowFullScreen='false' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' />
</object>
</noscript>

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.

TrackBack URI for this entry

Celso Azevedo Dezembro 28, 2008 http://telemovelonline.com/	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