Здравствуйте, есть код, на локалке следование за мышкой прерывистое, а на CodePen плавное. В чём проблема?
Прикрепляю ссылку на
CodePen
И сам код
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a class="link" href="#">Test</a>
<a class="link" href="#">Test</a>
<div class="cursor"></div>
<script src="main.js" type="module"></script>
</body>
</html>
.cursor {
position: absolute;
width: 20px;
height: 20px;
border-radius: 10px;
border: 2px solid black;
pointer-events: none;
transform: translate(-50%, -50%);
transition: all 0.2s linear;
}
.link-over {
transform: scale(2);
transition: all 0.2s linear;
}
const cursor = () => {
const cursor = document.querySelector('.cursor'),
links = document.querySelectorAll('.link')
const cursorMove = (event) => {
cursor.style.left = `${event.pageX}px`
cursor.style.top = `${event.pageY}px`
}
links.forEach(link => {
link.addEventListener('mouseover', () => {
cursor.classList.add('link-over')
})
link.addEventListener('mouseout', () => {
cursor.classList.remove('link-over')
})
})
window.addEventListener('mousemove', cursorMove)
}
export default cursor
