Существует много способов произвести впечатление на посетителя вашего веб-сайта. В частности, речь идёт об уникальных или интерактивных элементах. В этой статье мы разберём один и способов: замена курсора. Этот элемент интерфейса можно реализовать таким образом, что-бы он был не только визуальным, но и практически полезным. Роли которые может выполнять такой курсор: он моет быть интерактивным элементом, который будет сообщать о том, что курсор находиться на важном элементе и т.д. В данной статье мы не будем уделять большое внимание коду, а в устной форме опишем, все особенности и уникальные проблемы которые могут возникнуть при замене курсора.
А можно сделать такой самостоятельно
Если много подходов для разработки курсора, выбор зависит от того с каким подходом вы более знакомы и вам будет легче с ним работать. Можно пойти довольно простым путём, прибегнув к DOM. А точнее — сымитировать курсор воспользовавшись DOM-элемента и реализовать его таким, как вам удобно. В этой статье мы рассмотрим именно реализацию с помощью DOM.
Структура кода
Думаю стоит начать с нескольких строчек JavaScript-кода. Создаём простой ES6-класс и для удобства называем его Cursor. Этот тип конструктора имеет команды по настройке свойств объектов,скорость и позиции. Тут же и вызывается так называемый метод init.
Что такое метод init, помогает создать область видимости для нашего курсора.Для начала привязываем два основных метода, которыми мы будем пользоваться в дальнейшем onMouseMove и render. После мы включаем прослушиватель курсора mousemove, который будет отслеживать движения курсора
Перемещение мыши
Для того чтобы наложить собственное изображение на курсор, мы пользуемся mousemove и и получаем все сведения о позиции курсора. Далее мы будем использовать эти данные при настройке нашего курсора . Давайте разберёмся как работает onMouseMove?
Если мы будем рассматривать экран в качестве области мы можем описать её при помощи координатной системы, в которой и будут происходить перемещения курсора. Для удобства верхний левый угол будет в {x: 0, y: 0}, а противоположный — {x: 1, y: 1}.
Из события mousemove, мы получаем данные о позиции мыши в данный момент.Данные приводятся к диапазону 0-1 и сохраняются. Если будет замечено изменение в этих данных, то указываем на необходимость перемещение нашего курсора на новые координаты.
Цикл рендеринга
Теперь нам надо применить эти значения к чему-либо, что видно на экране. В нашем случае мы используем CSS-переменные, поэтому мы можем управлять почти любым объектом на экране.
Задержка перемещения нашего курсора будет задана третьей функцией lerp, который мы изначально задали как speed. Это свойство принимает данные о позиции курсора в координатной системе 0-1. Чем ближе значение к 0, тем дольше задержка и наоборот.
Далее, мы устанавливаем значения CSS-переменным. Задаём и устанавливаем корневого элемента, Поэтому проверить их можно с каждого CSS-селектора, который включен в дерево DOM. Нужно также Обратить внимание и на то, что lerp — это внутренняя и вспомогательная функция. И наконец мы проверяем отличается ли позиция мыши пользователя. от нашего курсора. Если это так, то наш курсор передвигается в нужное место.
Советы
При использовании этого варианта нет необходимости CSS-переменных. В рамках этого варианта можно управлять HTML-элементами напрямую, при использовании встроенных стилей.
requestAnimationFrame в методе init используется в целях помещения курсора на экран, По умолчанию он выставляет в центр экрана.
Такие, как значение Speed стоит настраивать правильно, ведь от этого зависит и удобство пользования вашим сайтом.
Вывод
Вышеописанный способ реализации курсора не ограничивается обычной точки. Подобные конструкции способны не только развлечь кошку, которая любит сидеть за компьютером. Они способны анимировать фоновые цвета с помощью CSS, Настраивать прозрачность и непрозрачность элементов или групп элементов,Подтягивать элементы интерфейса по мере приближения курсора к ним и так далее. С помощью таких конструкции можно достичь и много другого.
