Кастомизация стандартного курсора на сайте

Меняем обычный курсор на свой двумя способами: первый очень простой при помощи только CSS, второй посложнее с применением Javascript.

Custom cursor jpg

Зачем вообще его кастомизировать?

Действительно, доля touchscreen устройств неуклонно растёт, и такая затея кажется слишком сомнительной. Но всё-таки, иногда это может быть полезным. Например, для того, чтобы подчеркнуть уникальный дизайн либо вызвать нужные эмоции у пользователя.

Разберём два небольших примера, как это можно сделать.

CSS свойство

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

Cursor gif

Codepen

Не забывайте про fallback после url(), без него свойство работать не будет. Также стоит помнить о том, что не все браузеры позволяют менять стандартный курсор, более подробно о поддержке можно узнать на сайте caniuse.

Javascript курсор

При всей простоте предыдущего способа, у него есть ряд недостатков. Во первых такие браузеры, как IE и Edge, могут его не поддерживать, а во вторых у CSS курсора нет должного уровня взаимодействия. Это значит, что мы не сможем удобно изменять его состояние в зависимости от различных условий, поэтому лучше создать свой курсор при помощи Javascript.

HTML & CSS

В HTML просто создаём div желательно поближе к корневому элементу.

В файле CSS необходимо обязательно указать для этого div position: fixed и pointer-events: none, а ещё придать курсору желаемый внешний вид другими CSS свойствами. У меня это получилось так:

#cursor-custom {
  height: 50px;
  width: 50px;
  pointer-events: none;
  position: fixed;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff,
    0 0 70px #fff, 0 0 80px #fff, 0 0 100px #fff, 0 0 150px #fff;
}

Обязательно укажите для body cursor: none для того, чтобы скрыть дефолтный курсор, если это необходимо.

Javascript

Логично, что созданный div должен перемещаться по всей странице вслед за настоящим курсором. Для этого нам понадобится обработчик событий mousemove и свойства clientX/clientY, указывающие на текущие координаты положения мыши. Ах да и ещё нам необходим радиус нового курсора. В итоге получается такой код:

const cursor = document.getElementById("cursor-custom"),
  radius = cursor.offsetHeight / 2;

document.addEventListener("mousemove", (e) => {
  let top = e.clientY - radius,
    left = e.clientX - radius;

  cursor.style = `top: ${top}px; left: ${left}px`;
});

На этом можно и закончить. У меня получился вот такой необычный курсор, который подсвечивает спрятанный по центру текст:

Custom cursor

Codepen

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

Наши рекомендации
К сожалению, тут пока ничего нет.