Efeito de Raio no Site [Javascript]

Efeito de Raio no Site

Publicado por rafael farias novaes 28/01/2009

[ Hits: 12.939 ]

Homepage: http://www.vivaolinux.com.br/perfil/verPerfil.php?login=bfmano

Download efeito de raio.txt

1 0

Denuncie Favoritos Indicar

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.

Esconder código-fonte

<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

Modelo de Menu

Mundando a classe css de uma tag dinamicamente

boas vindas

EFEITO NO BACK

Menu sanfona com JQuery apenas utilizando as tags UL e LI

Comentários

[1] Comentário enviado por jlvidals em 07/09/2009 - 21:54h

Legal,
mas os raios poderiam ser mais fininhos ???

0 0

[2] Comentário enviado por rfarias em 09/09/2009 - 18:35h

sim...

0 0

[3] Comentário enviado por edivandoflf em 30/06/2010 - 09:29h

Gostei cara, parabens

0 0

[4] Comentário enviado por edivandoflf em 30/06/2010 - 09:30h

Como eu faço para deixar os raios mais finos?

0 0

[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

0 0