Tutorial: Shiny explosion {ao clicar} (´・ω・`)

| |
Grata pelos +100 seguidores, amo vocês ♡
Oi, oi cakes! Como vocês estão? Agradecendo mais uma vez pelos 100 seguidores! A próxima meta será 150, e mais um layout free virá! Que tal? sbafbsdgbgufk >//< Pessoal, ontem teve festa junina na minha escola! Fui obrigada a dançar quadrilha, mas pelo menos, nossa sala ganhou um passeio, estou tão feliz! ♡ E vocês? Me contem as novidades! bdsbfyudb ♡ q.

Hoje trouxe um tutorial muito fofinho e que considerei não muito conhecido, por isso decidi postar. Acho que só encontrei uns 2 blogs brasileiros com esse tutorial e acho que vocês irão gostar, dá um toquinho super lindinho ao blog! Vamos lá? Clique para ver mais...


Bem, antes de tudo, a prévia está aqui
O tutorial é bem fácil. Vá no seu quadro HTML e procure por </head> assim que encontrar essa tag, cole esse código abaixo acima de head:



<script type='text/javascript'>
// <![CDATA[
var sparks=100; // how many sparks per clicksplosion
var speed=10; // 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('#eebbf0', '#ffffff', '#eebbf0', '#ffffff', '#eebbf0');
//                
/****************************
*   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 alteráveis:
var sparks=100; // quantas faíscas por clique;
var speed=10; //  velocidades das faíscas;
var bangs=5; //  número de brilhos lançados por clique; quanto menor, melhor.
as hexadecimais grifadas, são as cores das faíscas; altere da forma que quiser, com cuidado para não apagar as vírgulas.

Créditos: (www) e (www)
Espero que tenham gostado! Kisses ♥

24 comentários

  1. Ficou legal, dependendo do tema do layout combina ヽ(*・ω・)ノ
    Até logo ♡ | Unicorns of Wonderland // Visita?

    ResponderExcluir
    Respostas
    1. Fofinho, né? Sim, tudo é questão de harmonia e organização! Visito sim~~ Beijos ♥

      Excluir
  2. Olá amor, tudo bem com você? Que saudade que eu estava do seu blog, desculpa a ausência aqui no blog a escola está me matando.
    Amei esse tutorial, estou pensando em usar <3
    Rumble.

    ResponderExcluir
    Respostas
    1. Olá! Tudo sim, obrigada, e com você?~~ Estava com saudades de ti também pro aqui, ahaha. Duas, né? T.T Ainda bem que entrei de ferias! :P Use sim, ficarei muuuito feliz ♥ Beijos.

      Excluir
  3. Oi Tori o/ Como vai? Novidades? Comecei a assistir American Horror History, fora isso nada que mereça importância.
    Amei o tutorial >//< acho que fica super fofo, mas dependendo do layout pode ficar bem exagerado, mas é uma questão de combinar tudo não?
    XOXO~
    ♥ Colorful Dream~


    ResponderExcluir
    Respostas
    1. Oie! Estou bem, thanks! Além da férias? Nenhuma novidade fbgdfsfddg q. AHS <33 Que bom que gostou! Sim, tudo é questão de harmonia :P Kisses!

      Excluir
  4. Oii <3 Tudo bem?
    Parabéns pelos 100 seguidores, você merece <3 E amei o tutorial, é muito fofinho 'u' Vou usar-lo.
    xoxo *3*
    Candy Bomb

    ResponderExcluir
    Respostas
    1. Olá! Estou bem, obrigada ♥ E você? Obrigadinhaaa~~ beijos >3<

      Excluir
  5. Olá!
    Parabéns pelos 100 seguidores seu blog merece .
    Adorei o menu,e as cores roxo com rosa,amei.
    garotadaserie.blogspot.com

    ResponderExcluir
    Respostas
    1. Olá! Obrigada, moça~♥ Que bom que gostou, beijos!

      Excluir
  6. Na festa junina do meu colégio não tem quadrilha, por isso é mais divertido, haha. Eu odiava dançar na frente de várias pessoas, sou tímida demais para isso...

    Ótimo tutorial, achei lindo o efeito que dá ao clicar! Vou usar no meu blog quando fizer um novo layout. E irei creditar, claro <3

    converse-high.blogspot.com

    ResponderExcluir
    Respostas
    1. Nossa, que sorte a sua! KABDSIF q. Também sou tímida Ç.Ç Que bom que gostou! Use sim, irei ficar muito feliz O3O Kisses~

      Excluir
  7. Oi oie ♥ Eu estou bem, obrigada por perguntar. E você, como está?
    Parabéns pelos seguidores ♥ Na minha escola vai ter quadrilha, acho, mas nem invento de dançar porque sempre dá algo errado comigo.
    Eu não tava entendo o que era, mas saquei do que se trata o tutorial. Eu adoro ficar clicando e vendo esses brilhos HEUEHUE'

    { rabbits&wolfs, thisismydemoninside, reckless }

    ResponderExcluir
    Respostas
    1. Oi! Awn, que nada~ Estou bem também, obrigada! OBRIGADINHAAAAAAAAAAA >33< NHAC! Que bom que gostou, kisses~

      Excluir
  8. Olá, Tori! Como vai?

    Parabéns pelos seguidores, espero que você consiga chegar nestes 150 o mais rápido possível <3 Vocês vão passear para onde? A minha escola é cristã, por isso não temos festas juninas :((((

    Adorei o tutorial! É realmente muito fofa essa explosão, haha!

    Com carinho, Clara

    // n-found.blogspot.com

    ResponderExcluir
    Respostas
    1. Olá, Clara! Estou bem, e você? >3< Obrigadinha, amore! Eu gosto de festa juninas, uma pena que não comemore na sua devido à religião T.T Que bom que gostou, beijos. ♥

      Excluir
  9. Olá, tudo bom?
    Hahaha eu gosto de festa junina, nunca dancei, mas acho legal!
    Viagem, que legal 'u'
    Gente, que tutorial divino, eu amei, de verdade é um amor hahaha
    Talvez no próximo layout eu coloque, vou até salvar o post 'u'

    † sessão proibida †

    ResponderExcluir
    Respostas
    1. Também gosto, mas dançar quadrilha é um micão, né? jkzbsdcjfv qq Que bom que gostou, fico muito feliz! ♥ Beijos!

      Excluir
  10. Oi, Tóri (babuina).
    Parabéns pelos cem seguidores, amorzinho ♥ Qualquer "presente" será muito válido~ E deve ter sido um micão dançar quadrilha, mas ao menos teve uma boa recompensa q
    Esse tutorial me lembra o orkut, tumblr e a blogosfera de 2010. Nunca deixa de ser fofo e fácil;; Está muito bem explicado, wee~
    Beijos, muah~

    Att. Mysi // Oh! Pyxis.

    ResponderExcluir
    Respostas
    1. Edwiges, sonsiene! Você por aqui? q. Obrigada amore ♥ Sim, amo essas coisinhas pra personalizar fdbgovbd acho tão fofas. Obrigada, beijos!

      Excluir
  11. Olá, eu estou bem, e tu? :3
    Espero que consigas alcançar a meta em breve <3
    Já conhecia esse efeito, algo semelhante, mas adorei o facto de divulgares <3

    fume,
    sleepy-deer.blogspot.com/

    ResponderExcluir
    Respostas
    1. Também estou bem, obrigada~! Se Deus quiser, obrigadinha² ♥ Beijos.

      Excluir
  12. Que lindo, adorei, talvez eu use.. Parabéns pela meta e que você consiga muito mais do que 150 seguidores.

    tempestadecores.blogspot.com

    ResponderExcluir
    Respostas
    1. Awee, thanks! Use sim, ficarei feliz >3< obrigada ♥

      Excluir

• Não comente apenas um link para divulgação, comente algo sobre o post.
• Pode utilizar palavrão desde que não ofenda ninguém.
• Aceito afiliação e tags, menos selinhos.