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

Курсор будет реагировать на скорость движения мыши, при этом о позволит вам «ощущать» скорость движения мыши буквально, ведь он будет растягиваться и видоизменяться при движении, а также переливаться градиентным оттенком.

Шаг 1. HTML

Для начала нам необходимо создать структуру нашего курсора, выглядеть она будет следующим образом:

Затем создаем фильтры SVG для курсора:

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

Шаг 2. CSS

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

Дополнительно можно загрузить фильтры из внешних SVG:

Шаг 3. JS

Нам понадобиться немного JavaScript (скрипт jQuery) для отслеживания положения мыши и активации курсора:

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

Вот и все. Готово!

Читайте также: