Как изменить курсор мыши на JavaScript
После прочтения этой статьи, у начинающего разработчика по крайней мере на один вопрос будет меньше. Заказчики часто просят исполнителя изменить дефолтный курсор мыши на кастомный.
К сожалению в JavaScript нет такого метода, который можно было бы добавить к документу и мгновенно изменить внешний вид курсора. Зато есть хорошо известный алгоритм, как это делать. Суть которого состоит в том, что средствами CSS создается внешний вид курсора, затем скрывается дефолтный курсор и созданный div следует за скрытым курсором по всей странице. Иными словами новый курсор повсюду следует за дефолтным.
Создание нового курсора
<div class="cursor"></div>
.cursor {
height: 40px;
width: 40px;
pointer-events: none;/ * курсор не является объектом события мыши * /
position: absolute;
border: 4px solid red;
border-radius: 50%;
box-sizing: border-box;
transition: 0, 1s;
transform: translate(-50%, -50%);
}
Добавление заголовка
Чтобы страница не была пустой, добавим ей заголовок.
<h2>Следовать за курсором на JavaScript</h2>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
cursor: none; / * скрываем настоящий курсор * /
overflow: hidden;
}
h2 {
font-family: Impact;
font-size: 24px;
text-transform: uppercase;
}
JavaScript код
#1) Найти на сайте новый курсор и сохранить его в переменную cursor. #2) Создать функцию обратного вызова и поместить её в переменную mouseMove. #3) Связать элемент с функцией, чтобы функция вызывалась, когда у элемента возникает событие mousemove.
const cursor = document.querySelector(".cursor"); // #1
const mouseMove = function (e) { // #2
let x = e.clientX;
let y = e.clientY;
cursor.style.left = x + "px";
cursor.style.top = y + "px";
};
document.addEventListener("mousemove", mouseMove); // #3
В теле функции определяем положение курсора. Каждый раз, когда пользователь перемещает курсор мыши, обработчик событий addEventListener отслеживает его текущие координаты. На месте дефолтного курсора мыши должен появиться кастомный курсор. Но как узнать, где находится курсор? При возникновении события, браузер собирает очень много информации о нем, в том числе он отслеживает координаты курсора и передает их обработчику событий. Для получения этих данных, мы передадим в функцию первым аргументом букву (e) - объект информации о событии. В скобках можно написать все что угодно, но большинство разработчиков пишут event или сокращенно e. Браузер передает его в обработчик событий при каждом возникновении этого события. Нас интересуют два свойства объекта - clientX и clientY. В них передаются координаты текущего положения курсора. Для позиционирования по горизонтали, установим для курсора X координату. Для вертикального позиционирования установим Y координату. Теперь новый курсор послушно следует за мышью пользователя.
Анимация над текстом
Добавим красивый эффект - при наведении курсора на текст, кастомный курсор увеличится в размерах и начнет вращаться.
h2:hover ~ .cursor {
width: 120px;
height: 120px;
border: 4px dashed red;
animation: animate 3s linear infinite;
}
@keyframes animate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
Посмотрите на CodePen, что у нас получилось в итоге.
-
Создано 14.04.2021 10:32:27
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.