Создание пользовательского указателя мыши в HTML, CSS и JavaScript 👆

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

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

С этими словами, давайте приступим к кодированию!

Что мы будем создавать

Начните с создания этих трех файлов: index.html, styles.css и script.js.

Структура HTML

Создайте стандартный код HTML-шаблона.

<!DOCTYPE html>
<html>
    <head>
        <title>Custom Mouse Pointer</title>
    </head>
    <body></body>
</html>

Вход в полноэкранный режим Выйдите из полноэкранного режима

Затем в теге <link> нашего HTML-файла импортируем styles.css.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
        <title>Custom Mouse Pointer</title>
    </head>
    <body></body>
</html>
Вход в полноэкранный режим Выход из полноэкранного режима

Импортируйте файл JavaScript, установив src тега <script> внизу нашего HTML-файла на наш файл script.js.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
        <title>Custom Mouse Pointer</title>
    </head>
    <body>
        <script src="script.js"></script>
    </body>
</html>
Вход в полноэкранный режим Выход из полноэкранного режима

Наконец, создайте div с классом pointer. Этот элемент будет использоваться вместо курсора по умолчанию. Поскольку это html-элемент, мы можем применить к нему множество стилей.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
        <title>Custom Mouse Pointer</title>
    </head>
    <body>
        <div class="pointer"></div>
        <script src="script.js"></script>
    </body>
</html>
Вход в полноэкранный режим Выйти из полноэкранного режима

Вот и все, что нужно сделать с HTML-файлом! Открыв файл index.html в браузере, вы получите пустую страницу.

Стилизация нашего HTML

Сначала мы установим фон нашей веб-страницы в светло-фиолетовый цвет.

body {
    background: #8499ff;
}
Войдите в полноэкранный режим Выход из полноэкранного режима

Установим высоту и ширину веб-страницы на максимальную высоту и ширину устройства, которое просматривает страницу.

body {
    ...
    height: 100vh;
    width: 100vw;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Затем, установив свойство overflow в none, мы предотвратим вертикальную и горизонтальную прокрутку.

body {
    ...
    overflow: hidden;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Наконец, мы спрячем указатель.

body {
    ...
    cursor: none;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Это должно быть сделано для body:

body {
    background: #8499ff;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    cursor: none;
}
Войти в полноэкранный режим Выход из полноэкранного режима

Теперь мы собираемся стилизовать указатель. Мы будем стилизовать не непосредственно указатель, а псевдокласс ::after.

Псевдокласс ::after выбирает содержимое, которое идет после выбранного элемента, позволяя вам вставить текст после определенного тега, что мы и будем делать в этом уроке.

.pointer::after {
    content: "🤩";
    font-size: 40px;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Мы установили свойство content в коде выше на эмодзи (🤩). Этот эмодзи будет нашим значком курсора по умолчанию. Затем размер увеличивается до 40px, чтобы сделать его немного больше.

Мы меняем эмодзи по умолчанию каждый раз, когда мышь нажимает на (😜). Для этого создается класс pointer-clicked. Этот класс будет присвоен указателю в JavaScript.

.pointer-clicked::after {
    content: '😜';
}
Вход в полноэкранный режим Выход из полноэкранного режима

Добавление функциональности с помощью JavaScript

Сначала выберите указатель, который мы создали в HTML, с помощью метода document.querySelector().

const pointer = document.querySelector(".pointer");
Войдите в полноэкранный режим Выйти из полноэкранного режима

Мы должны прослушать эти два события мыши:

  • mousemove: Когда указатель мыши перемещается
  • mousedown: Когда указатель мыши нажимается/нажимается вниз.
window.addEventListener("mousemove", onPointerMove);
window.addEventListener("mousedown", onMouseClick);
Вход в полноэкранный режим Выход из полноэкранного режима

Создадим функции обратного вызова для этих слушателей событий.

const onPointerMove = (e) => {
    // on pointer move
}

const onMouseClick = () => {
    // on mouse click
}
Вход в полноэкранный режим Выход из полноэкранного режима

Когда фактический указатель перемещается, мы хотим получить его позицию и передать ее элементу указателя, который мы создали в HTML.

const onPointerMove = (e) => {
    const mouseY = e.clientY;
    const mouseX = e.clientX;
    pointer.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Параметр clientY возвращает вертикальную координату указателя относительно области просмотра. Свойство clientX, с другой стороны, возвращает горизонтальную координату.

В строке pointer.style.transform мы изменяем местоположение пользовательского указателя, присваивая ему координаты реального курсора. Умный ход! 😊

Когда мышь щелкает, мы добавляем новый класс pointer-clicked. А затем удаляем этот вновь созданный класс через 150 миллисекунд в функции setTimeout, возвращая указатель в состояние по умолчанию.

const onMouseClick = () => {
    pointer.classList.add('pointer-clicked')
    setTimeout(() => {
        pointer.classList.remove('pointer-clicked')
    }, 150)
}
Вход в полноэкранный режим Выход из полноэкранного режима

В конце всего, в файле script.js должно быть следующее:

const pointer = document.querySelector('.pointer');

const onPointerMove = (e) => {
    const mouseY = e.clientY;
    const mouseX = e.clientX;
    pointer.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
}

const onMouseClick = () => {
    pointer.classList.add('pointer-clicked')
    setTimeout(() => {
        pointer.classList.remove('pointer-clicked')
    }, 150)
}

window.addEventListener("mousemove", onPointerMove);
window.addEventListener("mousedown", onMouseClick);
Вход в полноэкранный режим Выйти из полноэкранного режима

Теперь, открыв index.html в браузере, вы должны увидеть это!

Код доступен на GitHub

Заключение

Вот и все для этой статьи.

Если вы нашли эту статью полезной, следите за мной в Twitter и подписывайтесь на мою еженедельную рассылку материалов по веб-разработке и разработке программного обеспечения.

Оцените статью
devanswers.ru
Добавить комментарий