Efeito de Raio no Site
Publicado por rafael farias novaes 28/01/2009
[ Hits: 12.617 ]
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>
Scripts recomendados
Mudando o layout dinamicamente
EFEITO NEVE REVISADO COM MAIS FLOCOS!
Comentários
[1] Comentário enviado por jlvidals em 07/09/2009 - 21:54h
Legal,
mas os raios poderiam ser mais fininhos ???
Legal,
mas os raios poderiam ser mais fininhos ???
[4] Comentário enviado por edivandoflf em 30/06/2010 - 09:30h
Como eu faço para deixar os raios mais finos?
Como eu faço para deixar os raios mais finos?
[5] Comentário enviado por rfarias em 25/07/2010 - 19:36h
tenta mudar esta linha de tag. as ultimas
<script language="javascript">
swi = (ie4) ? document.body.offsetWidth-10 : window.innerWidth;
shi = (ie4) ? document.body.offsetHeight-2 : 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>
__________________________________________________________________________________________________________________________________________
agora substitua e tenta ver como fikou.
Abras
tenta mudar esta linha de tag. as ultimas
<script language="javascript">
swi = (ie4) ? document.body.offsetWidth-10 : window.innerWidth;
shi = (ie4) ? document.body.offsetHeight-2 : 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>
__________________________________________________________________________________________________________________________________________
agora substitua e tenta ver como fikou.
Abras
Patrocínio
Site hospedado pelo provedor RedeHost.
Destaques
Artigos
Passkeys: A Evolução da Autenticação Digital
Instalação de distro Linux em computadores, netbooks, etc, em rede com o Clonezilla
Título: Descobrindo o IP externo da VPN no Linux
Armazenando a senha de sua carteira Bitcoin de forma segura no Linux
Enviar mensagem ao usuário trabalhando com as opções do php.ini
Dicas
Instalando Brave Browser no Linux Mint 22
vídeo pra quem quer saber como funciona Proteção de Memória:
Encontre seus arquivos facilmente com o Drill
Mouse Logitech MX Ergo Advanced Wireless Trackball no Linux
Compartilhamento de Rede com samba em modo Público/Anônimo de forma simples, rápido e fácil
Tópicos
Programa duplicado no "Abrir com" e na barra de pesquisa do ... (1)
VMs e Interfaces de Rede desapareceram (13)
Como abrir o pycharm no linux [RESOLVIDO] (4)
Top 10 do mês
-
Xerxes
1° lugar - 74.933 pts -
Fábio Berbert de Paula
2° lugar - 54.706 pts -
Mauricio Ferrari
3° lugar - 16.900 pts -
Andre (pinduvoz)
4° lugar - 15.739 pts -
Alberto Federman Neto.
5° lugar - 15.482 pts -
Daniel Lara Souza
6° lugar - 15.137 pts -
Diego Mendes Rodrigues
7° lugar - 14.953 pts -
Buckminster
8° lugar - 13.634 pts -
edps
9° lugar - 12.509 pts -
Alessandro de Oliveira Faria (A.K.A. CABELO)
10° lugar - 11.903 pts
Scripts
A maior comunidade GNU/Linux da América Latina! Artigos, dicas, tutoriais, fórum, scripts e muito mais. Ideal para quem busca auto-ajuda.
Site hospedado por:
