Ignite Your Website with a Fiery Animated Cursor Trail Effect in Elementor | WordPress Tutorial

So if you follow along in the video, I refer to this blog post for you to enter code at certain points, so below is everything you will need!

The button below will take you to get the hex codes for the gradient you want to create:

Visit Site

The Following code goes into Elementor -> Custom Code :

				
					  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>

<style>
.circle {
  height: 24px;
  width: 24px;
  border-radius: 24px;
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
	box-shadow:rgba(0,0,0,0.08) 0px 10px 10px;
  z-index: 9999998; /* so that it stays on top of all other elements */
  transform: translate(35, 35);
  opacity: 0; /* Initially hidden */
  transition: opacity 0.2s ease; /* Smooth fade in/out */
	
}
</style>

<script>
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

const colors = [
  "#ffeb38", "#ffe332", "#ffda2c", "#ffd126", "#ffc71f", "#ffbd19", 
  "#ffb213", "#ffa70d", "#ff9c07", "#ff9000", "#f98300", "#f37600", 
  "#ed6b00", "#e75f00", "#e15400", "#db4a00", "#d44000", "#ce3600", 
  "#c82d00", "#c22400", "#bc1c00", "#b51400", "#af0d00", "#a90600", 
  "#a30000"
];

circles.forEach(function (circle, index) {
  circle.x = 0;
  circle.y = 0;
  circle.style.backgroundColor = colors[index % colors.length];
});

let idleTimeout;

window.addEventListener("mousemove", function (e) {
  coords.x = e.clientX + 27;
  coords.y = e.clientY + 27;

  // Show circles when mouse moves
  circles.forEach(function (circle) {
    circle.style.opacity = 1; // Fade in
  });

  // Reset idle timeout on mouse move
  clearTimeout(idleTimeout);

  // Start idle timeout to fade out after 1 second
  idleTimeout = setTimeout(function () {
    circles.forEach(function (circle) {
      circle.style.opacity = 0; // Fade out
    });
  }, 100); // 1 second idle time
});

function animateCircles() {
  let x = coords.x;
  let y = coords.y;

  circles.forEach(function (circle, index) {
    circle.style.left = x - 12 + "px";
    circle.style.top = y - 12 + "px";

    circle.style.scale = (circles.length - index) / circles.length;

    circle.x = x;
    circle.y = y;

    const nextCircle = circles[index + 1] || circles[0];
    x += (nextCircle.x - x) * 0.3;
    y += (nextCircle.y - y) * 0.3;
  });

  requestAnimationFrame(animateCircles);
}

animateCircles();

</script>

Other Articles

How To Make A Vertical 3D Gallery Slider

https://youtu.be/BWoXciYFn-Q So if you follow along in the video, I refer to this blog post for you to enter code ...

How To Make A Horizontal 3D Gallery Slider

So if you follow along in the video, I refer to this blog post for you to enter code at ...

How To Make A Auto Rotating 3D Carousel

So if you follow along in the video, I refer to this blog post for you to enter code at ...

How To Make A 3D Carousel For Products

So if you follow along in the video, I refer to this blog post for you to enter code at ...