Adicionando o efeito de neve ao seu site
Para entrar no espÃrito de natal é legal adicionar algo no site, mudar o layout ou criar um logo de natal, mas isso pode dar trabalho, algo bem facil de se fazer é colocar um efeito de neve caindo. Por isso vou postar um script em javascript que faz isso.
Um exemplo de como ficará pode ser visto aqui.
Ele usa uma imagem de neve então copie essa imagem aqui(ou qualquer uma a sua escolha)
o link para essa imagem é http://i12.tinypic.com/6uscqjq.gif
para usa-lo é bem simples simplesmente copie todo o conteudo a seguir e cole após o <body> de seu site.
<script type="text/javascript">
/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use
Clubepc.org
******************************************/
function openwindow(){
window.open("autumn_effect.htm","","width=350,height=500")
}
//Configure below to change URL path to the snow image
var snowsrc="snow.gif"
// Configure below to change number of snow to render
var no = 10;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";
///////////Stop Config//////////////////////////////////
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;
if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("clubepc.org")!=-1)? "snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://www.clubepc.org\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}
function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}
function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}
if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
</script>
para ele funcionar é preciso alterar:
//Configure below to change URL path to the snow image
var snowsrc=”snow.gif”
para o endereço de onde se encontra a imagem, caso ela esteja na mesma pasta que a pagina pode deixar como está.
Também é possivel alterar os seguintes itens
// Configure below to change number of snow to render
var no = 10;
Irá alterar o numero de “flocos” de neve que irão aparecer
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
Irá alterar o tempo que o “flocos” seram exibidos na tela, 0 é infinito(ele irá até o fim da sua pagina e comecará do topo novamente)
// Configure how much snow should drop down before fading (“windowheight” or “pageheight”)
var snowdistance = “pageheight”;
Altera o tempo que os flocos iram cair, pageheight é até o fim da sua pagina(se tiver uma pagina grade isso não será bom), e windowheight é até o fim da tela(resolução do monitor).
Para manter a organizaçãse o do codigo fonte de seu site você pode salvar esse script em um arquivo .js como snow.js e em seu codigo fonte(também depois do <body>) colocar apenas
<script src=”snow.js” type=”text/javascript”></script>
alterando o src=”" para o local do arquivo no caso dele não estar na mesma pasta.
Um aviso importante: esse efeito de neve, usa bastante o processador!!!, com 5 abas dele abertas no firefox, ele estava usando 70% do meu processador(turion 64 – 2Ghz), então é melhor, colocar esse efeito, só na pagina inicial de seu site, para que ele não apareça em todas as paginas.
Se alguem quizer um outro script que não usa imagem(irá aparecer pontos) pode pedir que eu disponibilizo.
Update: olhando as origens das visitas achei no site http://www.agitonoite.com/index.php algo muito interessante, ao invez de usar a imagem de neve, colocaram um gif de fogos de artificios, ficou muito legal.
Fica ai a ideia pra quem quizer usar esse efeito agora depois do natal =D
Gostou desse script?, quer saber como ele funciona. Então veja o preço de alguns livros no Já cotei
(4 votos. Média: 4 de 5)
Loading ...Tags: CSS, Javascript, Script
Leia também
Redirecionando uma pagina »« Fixando um conteudo na tela usando CSS
