I'm looking to create a mouse trail that follows the cursor as it moves, made up of small icons or images that gradually fade out over time. I attempted to achieve this by overlaying a grid on top of all other elements on the page. The grid consists of small divs with background images, each set to an initial opacity of 0. While visually the solution worked, it rendered the elements on the page unclickable. How can I maintain the visual effect while ensuring all elements remain clickable?
I experimented with adjusting the z-index of clickable elements to be higher than that of the grid elements, which allowed for clicking but obscured the trail effect. This is not the desired outcome.
After researching for a solution, I reviewed the following pages and tutorials, but none provided a resolution to my specific issue:
Cursor Trails - Simple CSS Tricks
YouTube Tutorial - Creating Mouse Trails
Stack Overflow - Cursor Inconsistencies
const body = document.getElementsByTagName("body")[0];
const mouseMovementContainer = document.createElement("div");
mouseMovementContainer.setAttribute("id", "mouseMovementContainer");
mouseMovementContainer.classList.add("mouseMovement");
body.insertBefore(mouseMovementContainer, body.firstChild);
createNewGrid();
function createNewGrid () {
for(let i = 0; i <= 1000; i++){
const square = createOneSquare();
mouseMovementContainer.appendChild(square);
}
}
function createOneSquare () {
const div = document.createElement("div");
div.classList.add("square");
return div;
}a{
font-size: 40px;
}
.mouseMovement {
background-color: transparent;
position: fixed;
z-index: 100;
display:flex;
flex-wrap: wrap;
}
.square {
width: 40px;
height: 40px;
background-image: url("https://icon-library.com/images/fire-icon-free/fire-icon-free-1.jpg");
background-size: cover;
opacity: 0;
}
.square:hover {
opacity: 1;
}<a href="https://www.google.com/">Go to Google!!!!</a>