<MyRusakov.ru />

Программирование на C++ с Нуля до Гуру

Программирование на C++ с Нуля до Гуру

Данный курс научит Вас программировать на языке C++, который, несмотря на свой почтенный возраст, необычайно сильно востребован. Курс состоит из 6 разделов, посмотрев которые и выполнив все упражнения, Вы с нуля освоите этот язык и сможете создавать самые разные проекты любой сложности на C++.

Для закрепления материала из уроков к ним идёт множество упражнений.

Дополнительно к курсу идёт вспомогательная система, которая не даст Вам забросить начатое на полпути.

Также вместе с курсов Вы получаете Бонус "Программирование на C++ в Unreal Engine", в котором Вы научитесь создавать игры на C++ с использованием этого движка.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Как изменить курсор мыши на 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, что у нас получилось в итоге.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.