Создаем собственный курсор при помощи CSS и JavaScript

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

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

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

Эта статья ориентирована на начинающих разработчиков, но понимание некоторых вещей у вас уже должно быть. Чтобы создавать собственные курсоры, вам нужно знать HTML, а также основы CSS и JavaScript.

Кастомизация курсора мыши с помощью CSS

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

Фронтенд-разработчики применяют это свойство часто. Называется оно незамысловато — cursor.

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

See the Pen CSS Cursors by Franklin Okolie (@developeraspire5) on CodePen.

Этот пример на CodePen позволяет протестировать разные виды курсоров. Просто наводите мышь на кнопки с подписанными значениями свойства cursor и оценивайте результат.

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

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

Из примера видно, что я установил свойство cursor для элемента body, так что оно будет применяться к курсору по всему документу. Нужное изображение указано в url().

Далее я добавляю еще парочку url() просто на случай, если первая картинка не загрузится или не найдется из-за каких-то внутренних проблем (т. е. это fallback). Сайт, внезапно оставшийся вообще без курсора, — просто кошмар разработчика, так что fallback важен. Вы можете добавить столько запасных URL, сколько хотите.

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

Вы также можете настроить отдельный курсор для любого элемента или раздела вашего сайта. Пример на CodePen:

See the Pen Custom cusors on specific element. by Franklin Okolie (@developeraspire5) on CodePen.

Это все о кастомизации курсоров при помощи CSS. Теперь давайте посмотрим, что можно сделать, добавив JavaScript.

Как сделать собственные курсоры мыши с помощью JavaScript

Чтобы использовать в этом деле JavaScript, нужны манипуляции с DOM.

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

<div class="cursor rounded"></div>
<div class="cursor pointed"><div>

Для представления курсора я создал два блока div. Мы будем манипулировать ими из JavaScript.

Но все по порядку. Сперва создадим CSS.

body{
  background-color: #1D1E22;
  cursor: none;
}

.rounded{
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.pointed{
  width: 7px;
  height: 7px;
  background-color: white;
  border-radius: 50%;
}

Обратите внимание: в CSS я отключил курсор (помните cursor:none?). Это сделает курсор невидимым; вместо него будет отображаться наш кастомный курсор.

Я стилизовал блоки div, чтобы придать им курсорообразный вид. Вы можете сделать что-то свое, может, добавить фоновый рисунок, эмодзи, стикеры и т. п.

Переходим к JavaScript.

Как с помощью JavaScript заставить курсоры двигаться

const cursorRounded = document.querySelector('.rounded');
const cursorPointed = document.querySelector('.pointed');


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

window.addEventListener('mousemove', moveCursor)

Я добавил прослушиватель событий в глобальном объекте window для прослушки любых движений мыши. Когда мышь двигается, вызывается функциональное выражение moveCursor. В качестве параметра оно получает объект события. При помощи этого параметра я смог получить координаты мыши (X и Y) на любой точке страницы.

Я уже выбрал все виды курсора из DOM при помощи querySelector. Все, что мне оставалось, это перемещать их на точки, определенные координатами X и Y. Это делается путем управления свойствами transform со значением translate3d. В результате, когда движется мышь, блоки div перемещаются в нужные места на странице.

Обратные кавычки, которые вы видите в коде, это шаблонные строки. С их помощью можно легко добавлять переменные к строкам. Альтернативный вариант — конкатенация переменных и строк.

Просто, правда?

Вот CodePen с кодом и результатом его работы:

See the Pen Customized cursor with JavaScript by Franklin Okolie (@developeraspire5) on CodePen.

Какой метод лучше?

Выбор метода целиком зависит от ваших нужд. Если вам нужно использовать какие-то эмодзи или картинки в качестве курсора — выбирайте CSS. А для кастомизации сложных фигур и управления их движением лучше использовать JavaScript.

Хорош любой способ, позволяющий достичь желаемого результата и поразить посетителей сайта.

Перевод статьи «How to Make a Custom Mouse Cursor with CSS and JavaScript».

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]