Web Louca

Home scripts Flocos de Neve na sua página

Flocos de Neve na sua página

 

Flocos neve websitePela 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

<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:

<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:

<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(0)
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?


Escreva o seu Comentario
 
  pequeno | maior
 

busy
Subscreve a newsletter gratuita e começa hoje mesmo a criar websites e a ganhar dinheiro na internet!


jsimageNeste artigo vou-lhe demonstrar como rodar imagens e qualquer elemento desde div a span co...
phpthumbAtualmente praticamente todos os websites possuem a necessidade de listar os seus artigos...
benchmarksA pouco mais de um ano falei sobre uma ferramenta para otimizar imagens (Artigos/optimize...
phpimageredRedimensionar uma imagem com php pode ser um processo complicado. Quando por exemplo um wo...
linksafiliadosNo inicio do ano escrevi um artigo onde dáva a conhecer uma forma de criar links de afili...

Nuvem de Tags

exemplo mootools download site