I'm currently working on implementing a custom mouse trail using temporary divs. These divs are supposed to appear at the location of the mouse and then fade out after a short period. However, I've run into an issue where the divs only appear at the initial mouse location and don't follow the mouse as it moves. I am trying to figure out how to make the divs stick with the mouse as it moves and continue drawing more divs along the path. Additionally, I would like to add a fade-out effect to each individual div so that they gradually become transparent after being placed. Here is the code snippet I have written so far:
var posX,
posY,
paused = null,
circles = [],
maxCircles = 30,
//width & height of div
circleSize,
//border radius to make it look like a circle
rad,
randCircle;
$(document).ready(function() {
for (var i = 0; i < maxCircles; i++) {
circleSize = Math.floor((Math.random() * 10) + 5);
rad = Math.floor(circleSize / 2);
circles[i] = document.createElement("Div");
circles[i].style.opacity = "0.6";
circles[i].className = "circle";
circles[i].style.width = circleSize + "px";
circles[i].style.height = circleSize + "px";
circles[i].style.borderRadius = rad + "px";
circles[i].style.background = "green";
circles[i].style.zIndex = "-1";
}
$("body").mousemove(function(e) {
posX = e.clientX - 5;
posY = e.clientY - 5;
randCircle = Math.floor((Math.random() * (maxCircles - 1)) + 0);
if (!paused) {
document.getElementsByTagName("body")[0].appendChild(circles[randCircle]);
$('.circle').css({
position: "absolute",
top: posY,
left: posX
});
paused = setTimeout(function() {
paused = null
}, 100);
}
});
});body, html {
height: 100%;
background: #eee;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>