Efeito: Explosão de Brilhos ao Clicar!

Oiiii...depois de alguns pedidos, eis o tutorial da explosão de brilhinhos que aparece quando se clica em qualquer lugar aqui do blog. Mas antes, por falar em pedidos, quero contar para vocês que criei tipo um fórum para o Reino Kawaii em que vocês poderão deixar seus pedidos de posts, dúvidas, sugestões, fazer críticas...enfim, é uma forma de responder a cada leitor, já que tenho recebido muitas perguntas e sugestões aqui e nas redes sociais, as quais anotei tudinho, irei postando aos poucos e para que não me esqueça, nada melhor do que ficar salvo bonitinho pra ler sempre neh; vocês podem acompanhar o status de cada pergunta também. Só clicar nessa aba fixa aí no topo (Make a wish) ou visitar o link do Reino Kawaii para perguntar. Farei um post detalhando melhor depois ok?
Mas bem, vamos ao post...do que que era mesmo...ah...os brilhinhos rsrsrs....
Tudo que é necessário é um script. Adicine-o acima de </head> no HTML do seu template:
<script type='text/javascript'>
// <![CDATA[
var sparks=80; // how many sparks per clicksplosion
var speed=33; // how fast - smaller is faster
var 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> 
Partes Editáveis:
var sparks=80; // quantas faíscas por clicksplosion
var speed=33; // velocidade - menor numero mais rapido
var bangs=5; // numero de brilhos lançados simultaneamente - quanto menor melhor
var colours=new Array('#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff'); - cores em HTML; no caso, coloquei tudo branco, mas você pode fazê-lo colorido adicionando códigos de cores diferentes - Veja a tabela e paletas de cores aqui.
Agora deixe de acordo com seu gosto e salve :3
Espero que gostem e beijus!!
Créditos: mf2fm






Postar um comentário

4 Comentários

  1. Ah que legal,gostei do tuto *u*

    diamond-glass.blogspot.com

    ResponderExcluir
  2. *o* gostei do tutorial, muito obrigada pelos posts majestosos sou muito grata a cada um deles e coloquei o efeito no my blog, ficou lindo *o*
    kisses
    >>ncnosekai.blogspot.com

    ResponderExcluir
  3. Onw, está super lindo esse novo layout do blog, vc só pode ser a diva do html, só pode! pra fazer essa divesa incomparável aqui!
    ~ amei o tutorial , como sempre se superando, eu queria mesmo saber como se fazia isso, parece uma varinha mágica plin KK'

    Adolescente Nerd

    ResponderExcluir
  4. Amei ! *u* *--------* super legal !!

    ResponderExcluir

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

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up