08 Апр Изменение отображения курсора на CSS
С помощью CSS можно изменять отображение курсора мыши при наведении на определенные элементы сайта. Существует огромное множество вариантов внешнего вида курсора. Здесь собраны некоторые из них, и мы предлагаем ознакомиться с ними.
Для чего это нужно? Изменение вида курсора при наведении существенно облегчает понимание интерфейса и ведет к положительному пользовательскому опыту (User Experience). Кроме того, это достаточно просто в реализации и не несет дополнительной нагрузки на сайт.
Существуют настройки отображения различных элементов в браузере по умолчанию (User Agent Stylesheet). Например, ссылки автоматически подсвечиваются синим и подчеркиваются. А при наведении курсора он меняется на «палец» (pointer).
Однако, бывают случаи, когда настроек по умолчанию недостаточно для понимания предполагаемого действия. В этой ситуации мы и должны прописывать свойства курсора в CSS. Например, у нас есть элемент, который можно перетащить (функция draggable() на JS). Если мы оставим свойства курсора без изменений, пользователь не поймет, что элемент интерактивен. Поэтому следует указать свойство cursor: move;. В результате внешний вид курсора изменится, что подскажет назначение элемента.
See the Pen repqBm by Alexander Webmassa (@Webmassa) on CodePen.
Существует множество типов отображения курсора, которые приведены в примере ниже. Они подходят для работы с изображениями, формами обратной связи, текстом, таблицами и многими другими функциями. Автор подборки — Chris Coyier.
See the Pen The Cursors! by Alexander Webmassa (@Webmassa) on CodePen.
Но это еще не все!
Использование изображений в качестве курсора
Как насчет того, чтобы разработать собственный внешний вид курсора при наведении на определенный элемент? Для этого мы можем задать путь к изображению, которое будет заменять стрелку. Прописываем cursor: url('path-to-image.png'), auto; и наслаждаемся проделанной работой.
See the Pen CursorIMG by Alexander Webmassa (@Webmassa) on CodePen.
Более того, для этого также можно использовать изображения в SVG. Наведите мышью на кнопку ниже — и увидите наш логотип в этом легком и масштабируемом формате.
GIF анимации эта функция не поддерживает. Анимированный курсор можно сделать только с помощью CSS и JS — получается интересно, но достаточно сложно.
See the Pen Animation following cursor by tamm (@tamm) on CodePen.
Таким образом, используя изменения вида курсора при наведении на определенные элементы, вы сделаете ваш интерфейс более интересным. Это поможет удержать пользователя на сайте и увеличить среднее время посещения. Главное, как и в любом деле, «не переборщить» — используйте пользовательские свойства курсора только там, где это действительно необходимо.