Efeito de Raio no Site
Publicado por rafael farias novaes 28/01/2009
[ Hits: 12.829 ]
Homepage: http://www.vivaolinux.com.br/perfil/verPerfil.php?login=bfmano
Esta é a principal parte do efeito, este é o javascript responsável por criar os raios.
Copie e cole entre a tag <head></head> em seu arquivo html.
<script language="javascript"> ie4=document.all?1:0; ns4=document.layers?1:0; ns5=(document.getElementById && !document.all)?1:0; function init(){ // Bolt has an aura? (true | false) // takes twice as long to strike aura=false; bcolor="white"; acolor="blue"; // Make background color flash? (true | false) flash=true; skyNorm="black"; skyFlash="#000050"; if (flash) document.bgColor=skyNorm; // nbs = Number of main bolt segments nbs = 50; ct=0; // Font sizes for lightning bolt and aura segments fsb=shi*.3; fsf=shi*.2; fsbi=shi*.2; fsfi=shi*.12; fsbii=shi*.12; fsfii=shi*.07; xpos=cswi; ypos=0; if (ns5) ark = document.getElementById("ark"); if (ns4) { ol=document.layers["ark"]; ol = new Layer(swi); ol.left = 0; ol.top = 0; ol.height = shi; ol.zIndex=1; ol.visibility = "hide"; ret = "<style type='text/css'>"; for (i=1;i<10;i++){ ret += "div.bolt" + i + "{ "; ret += "position:absolute;"; ret += "font-style:'Times New Roman';"; ret += "font-size:" + ( fsf * i/9 ) + "px;"; ret += "color:" + bcolor + ";"; ret += "visibility:inherit;"; ret += "z-index:1}"; if (aura){ ret += "div.bolta" + i + "{ "; ret += "position:absolute;"; ret += "font-style:'Times New Roman';"; ret += "font-size:"+ ( fsf * 1.3 * i/9 ) + "px;"; ret += "color:blue;"; ret += "visibility:inherit;"; ret += "z-index:0}"; } } ret += "</style>"; for (fs=1;fs<10;fs++){ for (i=1;i<nbs;i++) { if (aura){ ret += '<div id="a'+ i +'f'+ fs +'" class="bolta'+fs+'">.</div>'; } ret += '<div id="s'+ i +'f'+fs+'" class="bolt'+ fs +'">.</div>'; } } ol.document.write(ret); ol.document.close(); } Time1 = setTimeout('mainplot()',100); } function mainplot() { lang = 0; xpos = Math.random() * cswi + cswi/2; ypos = 0; fs = 9; fsi = 8; deg = Math.random() * 30 - 15 +((xpos<cswi) ? +15 : -15); jag = Math.round(Math.random()*100)/100; zag = Math.round(Math.random()*100)/100; cur = Math.round((.5 * (Math.random()*10-5))*100)/100; ion= (Math.random()>.5) ? 1 : -1; if (ns4) { for (i=1;i<nbs;i++) { ang = Math.random() * jag * 90 - jag * 45; if ( Math.random() + .05 > zag){ lang = Math.random() * zag * 90 - zag * 45; } ang += lang; ct++; if (Math.random() * 10 > 9.5 && fsi > 1){ fsi--; leg1(); } xpos += Math.sin((deg+(ang+i*cur)) / 57.3) * (fsf*fs/9) * .07; ypos += Math.abs(Math.cos((deg+(ang+i*cur))/57.3)*(fsf*fs/9)*.07); if( aura ){ ol.document.layers["a"+ i +"f"+ fs].moveTo(xpos - ( fsf * 1.3 * fs/9 ) * .125, ypos - ( fsf*1.3*fs/9 )*.85); ct++; } ol.document.layers["s"+ i + "f"+ fs].moveTo(xpos-(fsf*fs/9)*.125, ypos-(fsf*fs/9)*.85); if (ypos>shi || xpos<0 || xpos>swi){ i=nbs; } } ol.resizeTo(swi,shi); Time1 = setTimeout("light()",100); } if (ie4 || ns5) { // Rewriting layers can be faster than repositioning in internet explorer ret = ""; fsf=shi*.2; for (i=1;i<nbs;i++) { ang = Math.random()*jag*90-jag*45; if (Math.random()+.05>zag){ lang=Math.random()*zag*90-zag*45; } ang += lang; ct++; if (Math.random()*10>9.5){ fsfi=fsf*.6; fsf*=.95; leg1(); } xpos += Math.sin((deg+(ang+i*cur))/57.3)*fsf*.07; ypos += Math.abs(Math.cos((deg+(ang+i*cur))/57.3)*fsf*.07); fsb = fsf*1.3; if (ypos>shi || xpos<0 || xpos>swi){ i=nbs; } if (aura){ ret += '<div id="darg'+ i +'" style="position:absolute;left:'+ (xpos-fsb*.125) +'; top:'+( ypos-fsb*.85) +'; font-size:'+ fsb +'px; color:rgb(0,0,255); z-Index:0">.</div>'; ct++; } ret += '<div style="position:absolute; left:'+ (xpos-fsf*.125) +'; top:'+ (ypos-fsf*.85) +'; font-size:'+ fsf +'px; color:'+ bcolor +'; z-Index:1">.</div>'; } ark.innerHTML = ret; Time1 = setTimeout("lightie()",100); } } function leg1() { xpo=xpos; ypo=ypos; lang=zag*ion*(30+Math.random()*20-10); ion*=-1; lang1=0; deg1=deg+ion*50+Math.random()*20-10; jlen=Math.random()*nbs*.25+nbs*.25; if(ns4) { fsii=fsi-1 for (j=1;j<jlen;j++) { ang1=Math.random()*jag*90-jag*45; if (Math.random()+.05>zag){ lang1=Math.random()*zag*90-zag*45; } ang1-=lang1; ct++; if (Math.random()*10>9.9 && fsii>1) { fsii--; leg2(); } xpo += Math.sin((deg1+(ang1+j*cur))/57.3)*(fsf*fsi/9)*.07; ypo += Math.abs(Math.cos((deg1+(ang1+j*cur))/57.3)*(fsf*fsi/9)*.07); if (aura) { ol.document.layers["a"+ j +"f"+fsi].moveTo(xpo-(fsf*1.3*fsi/9)*.125, ypo-(fsf*1.3*fsi/9)*.85); ct++; } ol.document.layers["s"+j+"f"+fsi].moveTo(xpo-(fsf*fsi/9)*.125, ypo-(fsf*fsi/9)*.85); if (ypo>shi || xpo<0 || xpo>swi){ j=jlen; } } } if (ie4 || ns5) { ret += '<div id="fork">'; for (j=1;j<jlen;j++){ ang1 = Math.random()*jag*90-jag*45; if (Math.random()+.05>zag){ lang1=Math.random()*zag*90-zag*45; } ang1 -= lang1; ct++; if (Math.random()*10>9.9) { fsfii=fsfi*.6; fsfi*=.95; leg2(); } xpo += Math.sin((deg1+(ang1+j*cur))/57.3)*fsfi*.07; ypo += Math.cos((deg1+(ang1+j*cur))/57.3)*fsfi*.07; fsbi = fsfi*1.3; if (ypo>shi || xpo<0 || xpo>swi){ j=jlen; } if (aura) { ret += '<div id="arg'+ j +' style="position:absolute;left:'+ (xpo-fsbi*.125) +'; top:'+ (ypo-fsbi*.85) +'; font-size:'+ fsbi +'px; color:rgb(0,0,255); z-Index:0">.</div>'; ct++; } ret += '<div style="position:absolute; left:'+ (xpo-fsfi*.125) +'; top:'+ (ypo-fsfi*.85) +'; font-size:'+ fsfi +'px; color:'+ bcolor +'; z-Index:1">.</div>'; } ret += '</div>'; } } function leg2() { xp=xpo; yp=ypo; lang1 = zag*ion*(30+Math.random()*20-10); lang2=0; deg2=deg1+ion*50+Math.random()*20-10; klen=Math.random()*nbs/2+nbs/2; if (ns4) { for (k=nbs/2;k<klen;k++) { ang2=Math.random()*jag*90-jag*45; if (Math.random()+.05>zag){ lang2=Math.random()*zag*90-zag*45; } ang2-=lang2; ct++; xp += Math.sin((deg2+(ang2+k*cur))/57.3)*(fsf*fsii/9)*.07; yp += Math.cos((deg2+ang2)/57.3)*(fsf*fsii/9)*.07; if (aura) { ol.document.layers['a'+k+'f'+fsii].moveTo(xp-(fsf*1.3*fsii/9)*.125, yp-(fsf*1.3*fsii/9)*.85); ct++; } ol.document.layers['s'+k+'f'+fsii].moveTo(xp-(fsf*fsii/9)*.125, yp-(fsf*fsii/9)*.85); if (yp>shi || xp<0 || xp>swi){ k=klen; } } } if (ie4 || ns5) { ret += '<div id="forki">'; for (k=nbs/2;k<klen;k++){ ang2 = Math.random()*jag*90-jag*45; if (Math.random()+.05>zag){ lang2=Math.random()*zag*90-zag*45; } ang2 -= lang2; ct++; xp += Math.sin((deg2+(ang2+k*cur))/57.3)*fsfii*.07; yp += Math.cos((deg2+(ang2+k*cur))/57.3)*fsfii*.07; fsbii=fsfii*1.3; if (yp>shi || xp<0 || xp>swi){ k=klen; } if (aura) { ret += '<div id="arg'+ k +'" style="position:absolute; left:'+ (xp-fsbii*.125) +'; top:'+ (yp-fsbii*.85) +'; font-size:'+ fsbii +'px; color:rgb(0,0,255); z-Index:0">.</div>'; ct++; } ret += '<div style="position:absolute; left:'+ (xp-fsfii*.125) +'; top:'+ (yp-fsfii*.85) +'; font-size:'+ fsfii +'px; color:'+ bcolor +'; z-Index:1">.</div>'; } ret += '</div>'; } } function light(){ ol.moveTo(pageXOffset, pageYOffset); ol.visibility = "show"; if (flash){ document.bgColor=skyFlash; } Time2 = setTimeout("ning()",(Math.random()*1000+1000)); } function lightie(){ ark.style.left = document.body.scrollLeft; ark.style.top = document.body.scrollTop; ark.style.visibility = "visible"; if (flash){ document.bgColor=skyFlash; } Time2=setTimeout("ningie()",(Math.random()*500+100)); } function ning(){ if (flash){ document.bgColor=skyNorm; } ol.visibility = "hide"; if (Math.random()*3 > 2){ Time2=setTimeout("light()", (Math.random()*500+100)); }else { for (fs=1;fs<10;fs++){ for (i=1;i<nbs;i++) { if (aura){ ol.document.layers['a'+i+'f'+fs].moveTo(-100, -100); } ol.document.layers['s'+i+'f'+fs].moveTo(-100, -100); } } Time1=setTimeout('mainplot()', (Math.random()*500+100)); } } function ningie(){ ark.style.visibility = "hidden"; if (flash){ document.bgColor = skyNorm; } if (Math.random()*3 > 2){ Time2 = setTimeout('lightie()', (Math.random()*500+100)); }else{ Time1 = setTimeout('mainplot()', (Math.random()*500+100)); } } function format(f){ f += ''; if (f.charAt(0) == '.') { f = '0'+f; } if (f.length == 1){ f += '.00'; } if (f.length == 3){ f += '0'; } return f; } function halt() { if (Time1){ clearTimeout(Time1); Time1=null; } if (Time2) { clearTimeout(Time2); Time2=null; } } </script> Implementação Substitua a tag <body> por esta: <body onload="window.focus();init();" onresize="document.location.href=document.location.href;" onunload="halt();"> Agora é só colocar o seguinte Javascript dentro do body: <script language="javascript"> swi = (ie4) ? document.body.offsetWidth-17 : window.innerWidth; shi = (ie4) ? document.body.offsetHeight-4 : window.innerHeight; cswi = swi/2; cshi = shi/2; ret = '<div id="ark" style="position:absolute; left:0; top:0; width:'+ swi +'; height:'+ shi +'; visibility:visible; z-index=1; overflow:hidden; clip:rect(0,'+ (swi) +','+ (shi) +',0)"></div>'; document.write(ret); </script>
Mudando o layout dinamicamente
Mundando a classe css de uma tag dinamicamente
Atualizando o Passado: Linux no Lenovo G460 em 2025
aaPanel - Um Painel de Hospedagem Gratuito e Poderoso
O macete do Warsaw no Linux Mint e cia
Um modo leve de ouvir/ver áudio/vídeo da internet em máquinas pererecas
Resolver algumas mensagens de erro do SSH
Instalar módulo de segurança do Banco do Brasil Warsaw do tipo .run
Sem espaço na partição home (2)
O que você está ouvindo agora? [2] (190)
Procrastinação e autossabotagem são problemas muito comuns na sociedad... (5)