Кастомный курсор в Readymag

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

Вставка кода доступна в Readymag на планах Professional и Custom. В режиме Preview вы можете попробовать ее на любом плане.

Примеры

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

Typography Principles

Typography Principles — подробное исследование истории и теории типографики. При скролле темный и светлый фон сменяют друг друга, но серый кружок-курсор остается хорошо заметен. Еще один хороший пример кастомного курсора от той же студии Obys Agency — сайт, посвященный их двухлетней годовщине.

Jack Towers

Огромный пикселизованный курсор-стрелка идеально дополняет общий вайб 90-х.

Komnata Agency

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

Делаем кастомный курсор

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

1. Создайте виджет Code.

2. Дважды кликните на него и вставьте код в секцию CSS, удалив все предыдущее:

body, html { cursor: url(*******************), auto; }

Ссылка в скобках после URL может вести на любое небольшое (примерно 10x10 пикселей) изображение, которое вы хотели бы использовать в качестве курсора. Auto задает форму, которую примет курсор, если изображение по URL окажется недоступно (в данном случае — обычную стрелку).

3. Можно также использовать одну из встроенных иконок — это делается так:

body, html { cursor: move; }

Здесь можно найти полный список вариантов. Auto из предыдущего кода — один из них.

4. Наконец, вы можете изменять курсор по наведению на один из элементов страницы. Для этого воспользуйтесь свойством data-id: в Readymag оно есть у каждого элемента и доступно через Browser Dev Tools.

Скопируйте значение data-id, а затем вставьте его в код, приведенный ниже:

[data-id="***********"] { cursor: help; }

или

[data-id="***********"] { cursor: url(********), auto; }

в зависимости от того, что вам нужно (см. пункты 2 и 3).

Зарегистрируйтесь в Readymag, чтобы создавать собственные сайты с кастомным курсором!

Прочитать оригинал этого материала на английском можно здесь.