27/12/13

Tutorial: Destellos del cursor al hacer click

 ¡¡Holis tomodachis!! ¿Qué tal, como estan? Espero que muy bien! ¡¡Wiii una gran noticia, somos 70!! Gracias a ustedes este blog va creciendo cada día :3 Y bueno, como no tuve tiempo de prepararles algo, les dejo unos gifsitos y favicons que se los dejaré abajo después de el siguiente tuto :)

Destellos que salen del cursor al hacer click :3
Este tutorial es muy fácil, es como el que tengo yo, haz click en cualquier parte y verás :)
Bueno para obtenerlo copias el siguiente código y lo pones en

Diseño >> Añadir Gadget >> HTML/Javascript: 

<script type="text/javascript">
// <![CDATA[
var sparks=75; // 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('#D5333E', '#B1B1B1', '#D5333E', '#B1B1B1', '#D5333E', '#B1B1B1', '#D5333E'); 
//                     red    green     red   green  red    green  red

/****************************
*   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>

Rojo: Los colores de las estrellitas al hacer click, puedes elegirlos AQUÍ


Saluditos y que tengan un lindo viernes

9 comentarios:

  1. Felicidades Amary!!!! Veo que tu blog va creciendo deprisa , me alegro por ti :D Gracias por el tuto y los gifs ^^
    Saludillos!

    ResponderEliminar
  2. muchas felicidades Amary!! ^^ seguro que serán más y más :) gracias por el tuto, quizás lo use ^^ y también gracias por los mini gifs, seguramente los use para mis entradas *0*
    saluditos! ^^

    ResponderEliminar
  3. Muchas felicidades por esos 70 seguidores^^ Y seguirán creciendo, seguro :)

    ResponderEliminar
  4. Felicidades :D Pronto serán 100 :D Saludos!

    ResponderEliminar
  5. felicidades y gracias por el tutorial

    ResponderEliminar
  6. muchas felicidades!! *-* , este blog es un lindo!, y gracias por el tuto ^^

    ResponderEliminar
  7. Aww congratulatios on your 70 followers! Hope your community gets bigger soon. Btw you should check the title, it's lemonade. Even thought love ur blog<3

    richansblog.blogspot.com

    ResponderEliminar
  8. Genialoso tuto, yo siempre quise poner ese efecto pero al parecer no se puede con plantillas clásicas o(╥﹏╥)o (¿las discriminan o que? muchas de las cosas más geniales no se pueden poner p(´⌒`。q) jum!)
    AH! Felicidades por los 78 seguidores ( ・ω・)9

    ResponderEliminar

Reglas:
-Respeto
-No insultar

¡Gracias por comentar!

Emojis:
(∩ω∩) | (>△<) | (>▽<) | (⊙▽⊙) | (●ω●) | (╯ω╰) | (☆▽☆) | (≧ω≦) | ≡(▔﹏▔)≡
Simbolos:
☺♥♫△☆ღ