ENRUStudio 25 апр в 10:30

Всё, что вы хотели знать, но стеснялись спросить о кастомных курсорах в CSS

Средний

9 мин

1.3K

Блог компании НетологияПрограммирование*CSS*HTML*Веб-дизайн*

Туториал

Перевод

Автор оригинала: Samson Omojola

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

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

Свойство cursor

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

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

Вот как выглядит базовый синтаксис:

selector {
    cursor: value;
}

Значение по умолчанию auto означает, что браузер отображает курсор в зависимости от контекста.

Список всех значений cursor

Давайте для начала пройдёмся по всем доступным параметрам cursor в CSS:

Значение cursor	Описание
`alias`	Создать псевдоним (alias) или ярлык (shortcut)
`all-scroll`	Выполнить прокрутку в любом направлении
`auto`	Значение по умолчанию: браузер выбирает курсор
`cell`	Выбрать ячейку таблицы
`col-resize`	Изменить размер столбцов
`context-menu`	Открыть меню
`copy`	Копировать элемент
`crosshair`	Курсор-крестик: точно показывает выбранную область
`default`	Стандартный курсор
`e-resize` / `w-resize`	Изменить размер по горизонтали
`grab`	Схватить и перетащить элемент
`grabbing`	Элемент перетаскивается
`help`	Доступна справка
`move`	Переместить элемент
`n-resize` / `s-resize`	Изменить размер по вертикали
`ne-resize` / `nesw-resize` / `sw-resize`	Изменить размер по диагонали из верхнего правого угла
`no-drop`	Область, в которую нельзя перетащить элемент
`none`	Курсор скрыт
`not-allowed`	Действие не будет выполнено
`nw-resize` / `nwse-resize` / `se-resize`	Изменить размер по диагонали из верхнего левого угла
`pointer`	Кликнуть по элементу
`progress`	Программа занята, но доступна для взаимодействия с пользователем
`row-resize`	Изменить размер строки
`text`	Выбрать текст
`vertical-text`	Выбрать вертикальный текст
`wait`	Программа занята и недоступна для взаимодействия с пользователем
`zoom-in` / `zoom-out`	Увеличить или уменьшить размер содержимого

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

По этой ссылке можно посмотреть полный список курсоров CSS. Разумеется, у этих курсоров есть оформление и они выполняют свою функцию. Но всё-таки можно придумать что-нибудь поинтереснее.

Как создавать кастомные курсоры

Создание кастомного курсора в CSS — задача несложная. Прежде всего найдите картинку, которая заменит курсор по умолчанию. Можно придумать дизайн самостоятельно или выбрать подходящий PNG в библиотеке, например в Font Awesome.

Далее, чтобы создать кастомный курсор, используйте свойство cursor с функцией url() — она передаёт на курсор местоположение изображения:

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

Чтобы применить курсор ко всем разделам сайта, лучше всего использовать свойство cursor в теге body HTML-кода. Но можно задавать кастомные курсоры и для конкретных элементов, а не для сайта в целом.

Можно добавить в свойство cursor значение fallback. Иногда изображение, используемое для кастомного свойства, бывает недоступным или не загружается. Тогда благодаря этому значению пользователям будет доступен другой вариант.

В этом случае auto является дескриптором fallback для кастомного свойства cursor. Если кастомный курсор недоступен, пользователи увидят стандартный курсор.

А ещё можно задать для сайта несколько кастомных курсоров в качестве резервных вариантов. Для этого всего лишь нужно добавить их пути в свойство cursor:

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

В приведённом выше коде три резервных курсора.

Поскольку кастомные курсоры привлекают внимание к элементам, которые вы хотите выделить, их лучше приберечь для определённых сценариев использования. К таким сценариям можно отнести:

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

Общие рекомендации по созданию кастомных курсоров

Вот несколько дельных советов по созданию кастомных курсоров:

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

Меняем курсор на указатель

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

Вот пример:

<style>
  /* Style the table */
  table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }

  /* Style the table cells */
  td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  }

  /* Style the table rows */
  tr:hover {
    cursor: pointer;
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
    <td>Chicago</td>
  </tr>
  <tr>
    <td>Bill</td>
    <td>35</td>
    <td>Los Angeles</td>
  </tr>
</table>

В этом коде мы используем селектор tr:hover, чтобы применить свойство cursor ко всем строкам таблицы при наведении курсора. Задайте для свойства cursor значение pointer, и курсор поменяется на иконку в виде руки.

Скрываем курсор мыши с помощью CSS

Чтобы скрыть курсор с помощью CSS, используйте свойство cursor со значением none. Пример:

<style>
  /* Style the body element */
  body {
    cursor: none;
  }
</style>

<body>
  <!-- Your content goes here -->
</body>

В этом случае курсор не виден на веб-странице. Если нужно скрыть его только над определённым элементом, примените свойство cursor к этому элементу, а не к body.

Иногда имеет смысл скрыть курсор в следующих ситуациях:

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

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

Курсоры: CSS vs JavaScript

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

Создавать курсоры с помощью CSS предпочтительнее по двум причинам:

простота — достаточно одной строки CSS, чтобы переключаться между разными типами курсоров;
поддержка браузерами — кастомные курсоры CSS совместимы со всеми браузерами, так что вам не понадобятся дополнительные настройки для работы сайтов в разных веб-браузерах.

Основной недостаток CSS при создании кастомных курсоров — это скромные возможности анимации и расширенных настроек.

И тут на сцену выходит JavaScript. В нём предусмотрено гораздо больше разнообразных вариантов. Например, можно наводить или перемещать курсор над определённым элементом, кликать по нему. Движения курсора можно обновлять и легко анимировать в зависимости от конкретных событий.

Как создать кастомный курсор с помощью JavaScript

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

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

Как видите, курсор состоит из двух элементов: кружочка побольше и кружочка поменьше. Создадим два элемента div и присвоим им имена классов:

<div class="cursor small"></div>
<div class="cursor big"><div>

Далее оформим стиль кружочков с помощью CSS. Для большого круга установим ширину и высоту 50px, а форму придадим с помощью border-radius: 50%.

Маленький кружок у нас полый, так что зададим его границу border-radius 50%, а ширину и высоту — по 6px. Отключаем курсор по умолчанию, указав cursor: none. Теперь вместо него появится кастомный курсор.

Для анимации большого круга воспользуемся @keyframes. Анимация длится 2s. В начале анимации мы применяем зелёный background-color и непрозрачность 0.2. В середине анимации цвет станет оранжевым, а к концу — красным. Указываем infinite для animation-iteration-count, чтобы анимация всё время повторялась:

body {
  background-color: #171717;
  cursor: none;
  height: 120vh;
}

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

.big {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  animation-name: stretch;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@keyframes stretch {
  0% {
    opacity: 0.2;
    background-color: green;
    border-radius: 100%;
  }
  50% {
    background-color: orange;
  }
  100% {
    background-color: red;
  }
}

А чтобы элементы следовали за движениями мыши, воспользуемся JavaScript. Скрипт ниже получает данные о движении мыши по веб-странице. Когда пользователь двигает мышь, функция извлекает координаты x и y и соответствующим образом обновляет положение обоих элементов div:

const cursorSmall = document.querySelector('.small');
const cursorBig = document.querySelector('.big');

const positionElement = (e) => {
  const mouseX = e.clientX;
  const mouseY = e.clientY;

  cursorSmall.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
  cursorBig.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
};

window.addEventListener('mousemove', positionElement);

Полный код и интерактивный курсор представлены в CodePen ниже:

Вот как это работает:

мы используем querySelector для доступа к двум элементам div;
добавляем приёмник событий, который получает информацию о движении мыши;
когда курсор движется, функция positionElement извлекает актуальные координаты мыши x и y;
эти координаты обновляют свойство transform: translate3d() для обоих элементов курсора, перемещая их соответствующим образом;
transform меняет положение элементов в горизонтальном и вертикальном направлении, а translate3d корректирует их положение в 3D-пространстве.

Кастомные курсоры: UX и совместимость с браузерами

Кастомные курсоры придают сайтам уникальности, но если перегнуть палку, они начинают раздражать и отвлекать пользователей. Многим людям они не нравятся, особенно если затрудняют навигацию по сайту. Курсор всё-таки должен быть удобным.

Прежде чем добавить кастомный курсор, спросите себя, действительно ли он повышает удобство работы с сайтом, или просто классненько смотрится. К тому же некоторые браузеры, особенно старые, не поддерживают спецэффекты курсоров. Вот данные CanIUse по поддержке в браузерах свойства cursor:

Чтобы не докучать пользователям, не переборщите с кастомными курсорами. И всегда задумывайтесь, подходят ли они по дизайну. Желательно предоставить пользователю выбор: тогда он сможет отключить кастомный курсор и вернуться к варианту по умолчанию.

Не забывайте о пользователях с ограниченными возможностями

На первый взгляд кажется, что курсоры — это классный способ придать сайту уникальности. Но они могут создать серьёзные проблемы для пользователей с ограниченными возможностями. Многие из них настраивают курсоры на свой вкус с помощью параметров операционной системы, например увеличивают размер курсора или выбирают высококонтрастные цвета. Людям с плохим зрением или нарушениями моторики проще работать с большим или контрастным курсором.

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

Если вам всё равно нужен кастомный курсор, вот что следует предусмотреть:

Разрешите пользователям отключать такой курсор. Некоторым людям больше нравится курсор по умолчанию, и у них должна быть возможность отказаться от кастомного варианта.
Уважайте личные предпочтения, связанные с особенностями здоровья. Используйте параметр prefers-reduced-motion, чтобы отключить кастомные курсоры для тех, кому они мешают:

@media (prefers-reduced-motion: reduce) {
   *{
cursor: auto; /* Reverts to the default cursor */
   }
}

Обеспечьте совместимость с экранными дикторами. Кастомные курсоры могут затруднять применение специальных возможностей, так что добавьте к элементам курсора параметр aria-hidden="true". Так элементы будут видны на странице, но не попадут в поле зрения программ чтения с экрана.

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

Чтобы расти, нужно выйти из привычной зоны и сделать шаг к переменам. Можно изучить новое, начав с бесплатных материалов:

посетить день открытых дверей бакалавриата «Программные системы и автоматизация процессов разработки»;
посмотреть запись встречи «Как стать бэкенд-разработчиком»;
пройти курс «Специалист по информационной безопасности: старт карьеры»;
записаться на вебинар «Гибкое планирование: как достичь целей без саморазрушения».

Или открыть перспективы и получить повышение с профессиональным обучением:

на новой программе «Go-разработчик с нуля»;
на курсе «React: фреймворк фронтенд-разработки»;
по специализации «DevOps-инженер»;
на расширенном курсе «Аналитик данных».

Теги:

Хабы: