Красивый курсор при помощи CSS и JavaScript

Не знаю как вам, но мне часто бросаются в глаза нестандартно оформленные сайты с кучей офигенных фич. Одной из них может быть классный курсор мыши, который отличается от обычных курсоров со стрелками или указателями, к которым вы привыкли.

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

Настроим курсор мыши с помощью CSS

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

CSS свойство cursor - это то, что нам нужно для создания кастомного курсора, но, думаю, перед тем как создавать что-то необычное, стоит разобраться с встроенными видами курсора (не знаю как вы, но до этой статьи я использовала всего пару 🤷‍♀️).

Из приведенного выше фрагмента кода и результатов вы можете увидеть и протестировать различные курсоры мыши, которые есть в CSS, наведя курсор мыши на каждое из этих полей, содержащих имя каждого значения свойства CSS cursor.

В приведенной выше песочнице вы можете посмотреть на варианты стандартного изменения курсора и соответствующее им имя значения свойства CSS cursor.

Но как же нам использовать свойство cursor для создания кастомного курсора?

Чтобы это сделать, нужно просто указать CSS, какое изображение вы собираетесь использовать в качестве курсора.

body {
  cursor: url('image-path.png'),auto;
}

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

body {
  cursor: url('image-path.png'), url('image-path-2.svg), 
          url('image-path-3.jpeg'), auto;
}

Меньше слов - больше песка, так что ловите песочницу:

Настроим курсор мыши с помощью JavaScript

Для того, чтобы кастомизировать курсор при помощи JavaScript нам нужно получить доступ к необходимому элементу из DOM и произвести с ним манипуляции.

Для начала давайте добавим простой HTML:

<div class="cursor square"></div>
<div class="cursor circle"></div>

Предлагаю в коде выше создать два div элемента, которые в дальнейшем станут нашим курсором. План состоит в том, чтобы управлять этими элементами из скрипта, чтобы их перемещение по странице прокручивалось событием mousemove с использованием координат X и Y движения мыши.

Но сначала давайте немного добавим стилей:

body{
  background-color: #FAFAFA;
  cursor: none;
}

.circle {
  width: 10px;
  height: 10px;
  border: 2px solid #000;
  border-radius: 50%;
}

.square {
  width: 10px;
  border: 2px solid purple;
  height: 10px;
}

Сейчас пора перейти к нашему скрипту:

Получим нужные нам элементы:

const cursorCircle = document.querySelector('.circle');
const cursorSquare = document.querySelector('.square');

И добавим обработку события:

const moveCursor = (event) => {
  const mouseY = event.clientY;
  const mouseX = event.clientX;
  
  cursorCircle.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
  cursorSquare.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
};

window.addEventListener('mousemove', moveCursor);

Я добавила обработку событий к глобальному объекту window для отслеживания любого движения мыши.

При перемещении мыши вызывается выражение функции перемещения курсора, которое получает объект события в качестве параметра. С помощью этого параметра можно получить координаты X и Y, а после этого переместить полученные нами элементы DOM в любую точку страницы управляя свойствами преобразования стиля с помощью значения translate3d.

Просто, верно? А на самом деле это и все, что я сегодня хотела вам показать!

Ловите еще одну песочницу с примеров выше:

Каком метод использовать лучше?

Теперь вам, как разработчику, решать, какой метод лучше всего подходит для вас. Вы можете использовать CSS, если хотите использовать в качестве курсора красивые смайлики или изображения. С другой стороны, вы можете захотеть использовать JavaScript, чтобы вы могли настраивать сложные фигуры по своему выбору и анимировать движение курсора.

В любом случае теперь у вас больше возможности для творчества, а значит творите и удивляете всех посетителей вашего сайта!

Читайте больше интересных заметок в Telegram канале или в моем блоге!

Интересное:

• Введение в курс по three.js