Как изменить курсор мыши на JavaScript

целебная сила

Как изменить курсор мыши на 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%);
}

Как изменить курсор мыши на JavaScript

Добавление заголовка

Чтобы страница не была пустой, добавим ей заголовок.


<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

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);
    }
}

Как изменить курсор мыши на JavaScript

Посмотрите на CodePen, что у нас получилось в итоге.

Источник

средство от простатита

Просмотров:

Добавить комментарий