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.
[code="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("
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 if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
} [/code] para ele funcionar é preciso alterar: //Configure below to change URL path to the snow image 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 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”) 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
var snowsrc=”snow.gif”
// 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;
var snowdistance = “pageheight”;
Redirecionando uma pagina »« Fixando um conteudo na tela usando CSS
Muito legal, continue assim…
parab
opa pessoal olhando as origens das visitas achei no site http://www.agitonoite.com/index.php algo muito interessante ao invez de usar a neve eles trocaram a imagem por um gif de fogos de artificios, fica ai a dica pra quem quizer usar esse efeito agora depois do natal =D
legal obrigado pelo comentario
usei a neve no natal e agora tou usando os fogos pro reveillon
nao to conseguindo colocar nao me adiciona no msn danielferreirasousa@yahoo.com.br e me fala pq quando vou salvar aparece um codigo de erros que “&” esta no lugar errado
[...] o Linux Clube PC Portugal a [...]
Belo Trabalho!
Eu quero um s
Ae thales eu sou formado em ciencias da computacao e gostaria d saber s isso presta mermo…
POWWW..IRADO MEU AMIGO MUITO OBRIGADO POR COMPARTILHAR SUAS HABILIDADES E UM POUCO DA SUA INTELIG
sera q vc pode me add no msn ?
leo_sivi@hotmail.com
add ai pf !
Os campos nome e e-mail são obrigatorios(o e-mail não será exibido), a URL é opcional.
Os comentários podem ter os seguintes comandos:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Posts mais vistos
- Download Vray 1.5 para 3ds Max
- Emulador Nintendo DS – No$GBA
- Pacote de fontes Graffiti
- Como fazer formulários em HTML/PHP
- Detonado – Castlevania: Portrait of Ruin – NDS
- Detonado – Castlevania Order of Ecclesia – NDS
- Instalar o Windows XP em Hds SATA
- Tutorial Básico PHP (Aprenda PHP)
- Download Photoshop CS3
- Download de modelos de carros para o 3ds Max
Gostou desse script?, quer saber como ele funciona. Então veja o preço de alguns livros no Já cotei