tuto de como brotar estrellitas del cursor (de varita jsjsjsjs)

Holiii, hoy quiero compartirles como hacer para que nuestro cursor desborde estrellitas (o lo que sea, corazones o dulces etc) 

Lo primero es escoger una imagen, en mi caso escogi esta porque tiene varias estrellitas y se vera mas fluido, les recomiendo eso, igual les dejo la imagen para descargar aqui, de igual forma que para el cursor necesitamos que tenga fondo transparente, si encuentran una en pintereste y no tiene el fondo transparente pueden quitarselo en la pagina de remove.bg para esta vez le ajustaremos el tamaño desde el codigo para no complicarnos 

lo siguiente es ir a una entrada que dejaremos como borrador y subir nuestra imagen para tener el enlace de ahi, la subimos y copiamos el enlace de la imagen, luego de eso nos vamos  a la parte de diseño y agregamos un gadget, lo dejaremos ahi para que sea mas facil solo agregar el codigo directo y no andar buscando donde ponerlo 

este es mi codigo, ahi solamente deberan cambiar el enlace de su imagen y el tamaño que sea proporcional al cursor

Y yaaaa, espero les sirva y les guste 🍥🍥🍥

<!-------- Efecto de estrellitas para el cursor ------->

<script type="text/javascript">

// <![CDATA[

// 1. En este bloque ira la url de la imagen jsjsjs (Asegúrate de que sea transparente)

var starImageUrl = "Justo entre estas comillas pega la url de tu imagen";

// 2. Tamaño de la imagen de estrellitas (en píxeles)

var starSize = 35;  //yo la puse asi de 35 pero pueden ponerla mas grande o mas pequeña//

// 3. Cantidad máxima de estrellas simultáneas

var sparkles = 70; ///Estas son las que van a salir a medida que movamos el cursor//

// -- Código optimizado para movimiento lento --

var x=0, y=0;

var swide=800, shigh=600;

var sleft=0, sdown=0;

var star = new Array();

var starv = new Array();

var starx = new Array();

var stary = new Array();

var currentSparkle = 0;

window.onload = function() { 

  if (document.getElementById) {

    for (var i=0; i<sparkles; i++) {

      var rats = createStarImage();

      rats.style.visibility = "hidden";

      rats.style.zIndex = "9999";

      document.body.appendChild(star[i] = rats);

      starv[i] = 0;

    }

    set_width();

    animateSparkles();

  }

}

function createStarImage() {

  var img = document.createElement("img");

  img.src = starImageUrl;

  img.style.position = "absolute";

  img.style.width = starSize + "px";

  img.style.height = "auto";

  img.style.pointerEvents = "none"; 

  return img;

}

// CUALQUIER movimiento del mouse, por mínimo que sea

document.onmousemove = function(e) {

  if (e) {

    y = e.pageY;

    x = e.pageX;

  } else {

    set_scroll();

    y = event.y + sdown;

    x = event.x + sleft;

  }

  

  // ¡esto lanza una estrella inmediatamente con cada mínimo movimiento

  launchSparkle();

}

function launchSparkle() {

  // Busca la siguiente estrella disponible en el ciclo

  if (starv[currentSparkle] == 0) {

    starv[currentSparkle] = 100;

    starx[currentSparkle] = x - (starSize / 2);

    stary[currentSparkle] = y - (starSize / 2);

    star[currentSparkle].style.left = starx[currentSparkle] + "px";

    star[currentSparkle].style.top = stary[currentSparkle] + "px";

    star[currentSparkle].style.visibility = "visible";

    star[currentSparkle].style.opacity = "1";

    

    currentSparkle = (currentSparkle + 1) % sparkles;

  }

}

function animateSparkles() {

  for (var c=0; c<sparkles; c++) {

    if (starv[c] > 0) {

      starv[c] -= 2; // Se desvanecen un poquito más rápido

      

      stary[c] += 2 + Math.random() * 3; // Caída constante hacia abajo

      starx[c] += (Math.random() - 0.5) * 4; // Ligero vaivén hacia los lados

      

      if (stary[c] < shigh + sdown && starv[c] > 0) {

        star[c].style.top = stary[c] + "px";

        star[c].style.left = starx[c] + "px";

        star[c].style.opacity = starv[c] / 100;

      } else {

        star[c].style.visibility = "hidden";

        starv[c] = 0;

      }

    }

  }

  setTimeout("animateSparkles()", 30); // Animación más fluida a 30ms

}

window.onscroll = set_scroll;

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)) {

    sdown=document.documentElement.scrollTop;

    sleft=document.documentElement.scrollLeft;

  } else {

    sdown=0; sleft=0;

  }

}

window.onresize = set_width;

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 && 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; shigh=sh_min;

}

// ]]>

</script>