Sugar kissed Letters

♡ Mouse Skin + Star Trail ♡

A little something for anyone who has asked about my mouse cursor and the sparkles that follow it! ♡

The cursor skin itself isn't mine — I got it from Cursors-4U, where you can choose from lots of different cute cursor designs.

The little pink star/glitter trail, however, is the code I use on my blog. 🎀

✧ move your mouse around to see the trail ✧

♡ QUICK TUTORIAL ♡

01. choose your mouse skin ♡

Go to Cursors-4U and browse their cursor collection until you find one you like.

Once you've chosen your cursor, follow the instructions provided on the cursor's page to add it to your Blogger blog.

02. add the star trail ♡

Copy the code below and paste it into:

Blogger → Theme → Edit HTML

Place it near the top of your theme, inside the <head> section, preferably just before </head>.

<script>

const glitterColors = [
  "#ffd1ec",
  "#ffb6d9",
  "#ffc8e8",
  "#ffe4f4",
  "#f7b2d9"
];

document.addEventListener("mousemove", function(e) {

  const star =
    document.createElement("div");

  star.style.position = "fixed";

  star.style.left =
    e.clientX + "px";

  star.style.top =
    e.clientY + "px";

  star.style.width = "6px";

  star.style.height = "6px";

  star.style.borderRadius = "50%";

  star.style.pointerEvents = "none";

  star.style.zIndex = "999999";

  star.style.background =
    glitterColors[
      Math.floor(
        Math.random() *
        glitterColors.length
      )
    ];

  star.style.boxShadow =
    "0 0 8px currentColor";

  star.style.color =
    star.style.background;

  document.body.appendChild(star);

  const x =
    (Math.random() - 0.5) * 20;

  const y =
    -25 - Math.random() * 20;

  star.animate(
    [
      {
        transform:
          "translate(0,0) scale(1)",
        opacity: 1
      },

      {
        transform:
          `translate(${x}px,${y}px) scale(0)`,
        opacity: 0
      }
    ],
    {
      duration: 700,
      easing: "ease-out"
    }
  );

  setTimeout(
    () => star.remove(),
    700
  );

});

</script>

♡ want different colors? ♡

You can change the colors of the stars by editing the hex codes inside:


    const glitterColors = [ ... ];

Replace the hex codes with any colors you'd like!

♡ star trail by Sugar Kissed Letters ♡

please don't repost, redistribute, or claim the star trail code as your own. ♡

Pages

♡ Mouse Skin + Star Trail ♡

♡ QUICK TUTORIAL ♡

1 comment:

Pages

♡ Mouse Skin + Star Trail ♡

♡ QUICK TUTORIAL ♡

1 comment:

Want to stay updatet whenever I post? leave your email below and I'll send you a little letter whenever there's a new blog post! ♡