Efeito: Explosão de Brilhos ao Clicar!

by - dezembro 18, 2013

Olá queridos, como estão? Espero que muito bem, é claro! 
Bem, hoje trouxe um tutorial bem rápido, que deixa o blog bem fofo, e que eu utilizo
raramente por preguiça de colocar. Mas é bem fofo mesmo.
Preview - (www) -clique em qualquer lugar.

Tudo que é necessário é um script. Adicine-o acima de </head> no HTML do seu template:
Continue lendo para ver o código completo
(A parte destacada são as cores que pode-se alterar)

<script type='text/javascript'>// <![CDATA[var sparks=80; // how many sparks per clicksplosionvar speed=33; // how fast - smaller is fastervar bangs=5; // how many can be launched simultaneously (note that using too many can slow the script down)var colours=new Array('#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff');//
/***************************** Clicksplosion Effect ** (c) 2012 mf2fm web-design ** http://www.mf2fm.com/rv ** DON'T EDIT BELOW THIS BOX *****************************/
var intensity=new Array();var Xpos=new Array();var Ypos=new Array();var dX=new Array();var dY=new Array();var stars=new Array();var decay=new Array();var timers=new Array();var swide=800;var shigh=600;var sleft=sdown=0;var count=0; function addLoadEvent(funky) { var oldonload=window.onload; if (typeof(oldonload)!='function') window.onload=funky; else window.onload=function() { if (oldonload) oldonload(); funky(); }} addLoadEvent(clicksplode); function clicksplode() { if (document.getElementById) { var i, j; window.onscroll=set_scroll; window.onresize=set_width; document.onclick=eksplode; set_width(); set_scroll(); for (i=0; i<bangs; i++) for (j=sparks*i; j<sparks+sparks*i; j++) { stars[j]=createDiv('*', 13); document.body.appendChild(stars[j]); }}} function createDiv(char, size) { var div, sty; div=document.createElement('div'); sty=div.style; sty.font=size+'px monospace'; sty.position='absolute'; sty.backgroundColor='transparent'; sty.visibility='hidden'; sty.zIndex='101'; div.appendChild(document.createTextNode(char)); return (div);} function bang(N) { var i, Z, A=0; for (i=sparks*N; i<sparks*(N+1); i++) { if (decay[i]) { Z=stars[i].style; Xpos[i]+=dX[i]; Ypos[i]+=(dY[i]+=1.25/intensity[N]); if (Xpos[i]>=swide || Xpos[i]<0 || Ypos[i]>=shigh+sdown || Ypos[i]<0) decay[i]=1; else { Z.left=Xpos[i]+'px'; Z.top=Ypos[i]+'px'; } if (decay[i]==15) Z.fontSize='7px'; else if (decay[i]==7) Z.fontSize='2px'; else if (decay[i]==1) Z.visibility='hidden'; decay[i]--; } else A++; } if (A!=sparks) timers[N]=setTimeout('bang('+N+')', speed);} function eksplode(e) { var x, y, i, M, Z, N; set_scroll(); y=(e)?e.pageY:event.y+sdown; x=(e)?e.pageX:event.x+sleft; N=++count%bangs; M=Math.floor(Math.random()*3*colours.length); intensity[N]=5+Math.random()*4; for (i=N*sparks; i<(N+1)*sparks; i++) { Xpos[i]=x; Ypos[i]=y-5; dY[i]=(Math.random()-0.5)*intensity[N]; dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25; decay[i]=16+Math.floor(Math.random()*16); Z=stars[i].style; if (M<colours.length) Z.color=colours[i%2?count%colours.length:M]; else if (M<2*colours.length) Z.color=colours[count%colours.length]; else Z.color=colours[i%colours.length]; Z.fontSize='13px'; Z.visibility='visible'; } clearTimeout(timers[N]); bang(N);} function set_width() { var sw_min=999999; var sh_min=999999; if (document.documentElement && document.documentElement.clientWidth) { if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth; if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight; } if (typeof(self.innerWidth)=='number' && self.innerWidth) { if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth; if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight; } if (document.body.clientWidth) { if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth; if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight; } if (sw_min==999999 || sh_min==999999) { sw_min=800; sh_min=600; } swide=sw_min-7; shigh=sh_min-7;} function set_scroll() { if (typeof(self.pageYOffset)=='number') { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; }}// ]]></script> <script type='text/javascript'>// <![CDATA[var sparks=80; // how many sparks per clicksplosionvar speed=33; // how fast - smaller is fastervar bangs=5; // how many can be launched simultaneously (note that using too many can slow the script down)var colours=new Array('#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff');//
/***************************** Clicksplosion Effect ** (c) 2012 mf2fm web-design ** http://www.mf2fm.com/rv ** DON'T EDIT BELOW THIS BOX *****************************/var intensity=new Array();var Xpos=new Array();var Ypos=new Array();var dX=new Array();var dY=new Array();var stars=new Array();var decay=new Array();var timers=new Array();var swide=800;var shigh=600;var sleft=sdown=0;var count=0; function addLoadEvent(funky) { var oldonload=window.onload; if (typeof(oldonload)!='function') window.onload=funky; else window.onload=function() { if (oldonload) oldonload(); funky(); }} addLoadEvent(clicksplode); function clicksplode() { if (document.getElementById) { var i, j; window.onscroll=set_scroll; window.onresize=set_width; document.onclick=eksplode; set_width(); set_scroll(); for (i=0; i<bangs; i++) for (j=sparks*i; j<sparks+sparks*i; j++) { stars[j]=createDiv('*', 13); document.body.appendChild(stars[j]); }}} function createDiv(char, size) { var div, sty; div=document.createElement('div'); sty=div.style; sty.font=size+'px monospace'; sty.position='absolute'; sty.backgroundColor='transparent'; sty.visibility='hidden'; sty.zIndex='101'; div.appendChild(document.createTextNode(char)); return (div);} function bang(N) { var i, Z, A=0; for (i=sparks*N; i<sparks*(N+1); i++) { if (decay[i]) { Z=stars[i].style; Xpos[i]+=dX[i]; Ypos[i]+=(dY[i]+=1.25/intensity[N]); if (Xpos[i]>=swide || Xpos[i]<0 || Ypos[i]>=shigh+sdown || Ypos[i]<0) decay[i]=1; else { Z.left=Xpos[i]+'px'; Z.top=Ypos[i]+'px'; } if (decay[i]==15) Z.fontSize='7px'; else if (decay[i]==7) Z.fontSize='2px'; else if (decay[i]==1) Z.visibility='hidden'; decay[i]--; } else A++; } if (A!=sparks) timers[N]=setTimeout('bang('+N+')', speed);} function eksplode(e) { var x, y, i, M, Z, N; set_scroll(); y=(e)?e.pageY:event.y+sdown; x=(e)?e.pageX:event.x+sleft; N=++count%bangs; M=Math.floor(Math.random()*3*colours.length); intensity[N]=5+Math.random()*4; for (i=N*sparks; i<(N+1)*sparks; i++) { Xpos[i]=x; Ypos[i]=y-5; dY[i]=(Math.random()-0.5)*intensity[N]; dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25; decay[i]=16+Math.floor(Math.random()*16); Z=stars[i].style; if (M<colours.length) Z.color=colours[i%2?count%colours.length:M]; else if (M<2*colours.length) Z.color=colours[count%colours.length]; else Z.color=colours[i%colours.length]; Z.fontSize='13px'; Z.visibility='visible'; } clearTimeout(timers[N]); bang(N);} function set_width() { var sw_min=999999; var sh_min=999999; if (document.documentElement && document.documentElement.clientWidth) { if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth; if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight; } if (typeof(self.innerWidth)=='number' && self.innerWidth) { if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth; if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight; } if (document.body.clientWidth) { if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth; if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight; } if (sw_min==999999 || sh_min==999999) { sw_min=800; sh_min=600; } swide=sw_min-7; shigh=sh_min-7;} function set_scroll() { if (typeof(self.pageYOffset)=='number') { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; }}// ]]></script>






You May Also Like

18 Comentários

  1. Eu acredito que seja fofo, mas sem prévia, não me vou arriscar a usá-lo. Não encontra prévia nenhuma? Nem onde aprendeu o tutorial? Queria tanto ver... :( Ah, e já agora, ele é aplicado automaticamente?

    Fiz perguntas demais, mas enfim. Ja nee ^^

    ResponderExcluir
  2. Coloca uma preview em um blog de testes se vc tiver um.
    Abraço.
    Diego|Sendo um Otaku||

    ResponderExcluir
  3. Eu amei ,coloque preview depois eu coloco no meu blog e dou créditos :33
    Bjs,loveforhtml.blogspot.com.br (VISITA? <3)

    ResponderExcluir
  4. Kawaiii~Gostei bastante~Irei usar Brevemente!!
    Gostei bastante do seu blogue muito kawaii e seus postes são muito interessantes, gostei mesmo U.u
    Estou seguindo~Omedetou tem quase 200 seguidores *~~~*

    Xau kisses

    ResponderExcluir
  5. Ah, é super fofo :3 Quando precisar usarei... Bem, o tema... Kamisama Hajimemashita, podes ser?...

    ResponderExcluir
  6. ~Nyaaah
    Eu estou muito bem *-* ~tirando um pouquinho de dor que estou sentindo~
    Nossa Gaby que efeito lindooo *-------------------*
    Quando for fazer um lay bem kawaii vou utiliza-lo okay?? =3 =3 =3 =3 =3 =3
    Estou encantada até agoraaa >.<

    ~. Kissus de morangos .~

    // s2loves2animes.blogspot.com //

    ResponderExcluir
  7. Olá Quanto tempo Gaby-chan!!! ^^
    Adoro ver seus tutoriais... Cada novidades que vc traz!

    Kiss
    http://tsuki-no-shita.blogspot.com

    ResponderExcluir
  8. OMG, faz tempo que não venho aqui.
    Tudo está tão lindo e perfeito Gaby-chan *---*
    Amei o tuto :3

    ResponderExcluir
    Respostas
    1. Sim... realmente rsrs
      Arigatou ^_^
      Fico feliz por isso!
      kiss~

      Excluir
  9. Amei, quando tiver um tempo coloco ele, ando meia ocupada rsrs, mas super fofo

    Kissus

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença!
Ambos são super importantes para mim.

Kaomojis:
(*´∀`*) (*≧∀≦*) (=´∀`)人(´∀`=) ( ・ ▽ ・)
ヾ(*^▽^*)o, 。・゚゚・(>_<)・゚゚・。 (>ω<;)*(´∀`)ノノ*
(。ゝω・)~♡ ヘ(´∀`ヘ)ヘ (╯°□°)╯•ᴥ• (´・ω・`)