Как создать курсор для сайта с помощью SVG

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Шаг 1. HTML

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

</div>

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

<feGaussianBlur

in="SourceGraphic"

stdDeviation="15"

result="my-blur" />

<feColorMatrix

in="my-blur"

mode="matrix"

values="

1 0 0 0 0

0 1 0 0 0

0 0 1 0 0

0 0 0 20 -8"

result="my-gooey" />

</filter>

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

Шаг 2. CSS

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

.cursor {

width: 100%;

height: 100%;

overflow: hidden;

-webkit-filter: url("#filter-name");

filter: url("#filter-name");

}

.dot {

position: absolute;

width: 80px;

height: 80px;

top: 50%;

left: 50%;

margin-top: -40px;

margin-left: -40px;

background: #EEEEEE;

border-radius: 40px;

transition: ease .1s;

pointer-events: none;

}

.dot:nth-child(5){

background: #9C27B0;

transition: ease .1s;

transform: scale(1);

}

.dot:nth-child(4){

background: #B037AD;

transition: ease .12s;

transform: scale(.8);

}

.dot:nth-child(3){

background: #C245AA;

transition: ease .14s;

transform: scale(.6);

}

.dot:nth-child(2){

background: #D252A7;

transition: ease .16s;

transform: scale(.4);

}

.dot:nth-child(1){

background: #E35FA4;

transition: ease .18s;

transform: scale(.2);

}

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

.cursor {

width: 100%;

height: 100%;

overflow: hidden;

filter: url('filters.svg#filter-name');

}

Шаг 3. JS

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

$(document).mousemove(function(e){

o = $('.cursor').offset();

$(".dot").css({

"top": e.pageY - o.top,

"left": e.pageX - o.left

});

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