Несколько курсоров следуют за мышью в JavaScript ⇐ Javascript

[Anonymous]

У меня есть сетка с несколькими предметами. Каждый элемент имеет свой собственный курсор с div .grid__item-cursor .
То, чего я пытаюсь достичь плавная скорость. < /p>
Проблема заключается в том, что при падении элемента все курсоры из документа перемещаются одновременно. И также слишком много расстояния между пользовательским курсором и мышей. />

Код: Выделить всё

const cursors = document.querySelectorAll(".js-cursor");

let aimX = 0;
let aimY = 0;

cursors.forEach((cursor) => {
let currentX = 0;
let currentY = 0;

let speed = 0.2;

const animate = function () {
currentX += (aimX - currentX) * speed;
currentY += (aimY - currentY) * speed;

cursor.style.left = currentX + "px";
cursor.style.top = currentY + "px";

requestAnimationFrame(animate);
};

animate();
});

const posts = document.querySelectorAll(".js-post");
posts.forEach((post) => {
const cursor = post.querySelector(".js-cursor");

post.addEventListener("mousemove", function (event) {
aimX = event.pageX;
aimY = event.pageY;
});

post.addEventListener("mouseenter", function () {
cursor.classList.add("is-visible");
});

post.addEventListener("mouseleave", function () {
cursor.classList.remove("is-visible");
});
});< /code>
body {
font-family: "helvetica", arial, sans-serif;
}

.grid {
display: grid;
width: 100%;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 1rem;
grid-row-gap: 1rem;
}

.grid__item {
display: flex;
justify-content: center;
align-content: center;
position: relative;
padding: 25%;
overflow: hidden;
background-color: #333;
}

.grid__item-number {
color: #888;
font-size: 5rem;
}

.grid__item-cursor {
position: absolute;
top: 0;
left: 0;
padding: 0.25em;
background-color: red;
}

.grid__item-cursor.is-visible {
background-color: yellow;
}< /code>


1
Read more


2
Read more


3
Read more


4
Read more


5
Read more


6
Read more


7
Read more


8
Read more

Подробнее здесь: https://stackoverflow.com/questions/794 ... javascript