Все для веб-дизайнера
Как создать курсор для сайта с помощью SVG
Курсор сайта весьма своеобразный элемент, который, как правило остается без внимания и стилизации. В данном уроке мы решили исправить эту закономерность и показать, как можно все же оживить такой мелкий но достаточно важный элемент на вашем сайте. Сегодня речь пойдем о создании анимированного курсора для сайта при помощи SVG, конечный результат нам напоминает лаву в лавалампе, но смотрится очень интересно и необычно.
Курсор будет реагировать на скорость движения мыши, при этом о позволит вам «ощущать» скорость движения мыши буквально, ведь он будет растягиваться и видоизменяться при движении, а также переливаться градиентным оттенком.
Шаг 1. HTML
Для начала нам необходимо создать структуру нашего курсора, выглядеть она будет следующим образом:
|
1 2 3 4 5 6 7 |
<div class="cursor"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> |
Затем создаем фильтры SVG для курсора:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<filter id="filter-name"> <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 должны быть применены к контейнеру курсора.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
.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:
|
1 2 3 4 5 6 |
.cursor { width: 100%; height: 100%; overflow: hidden; filter: url('filters.svg#filter-name'); } |
Шаг 3. JS
Нам понадобиться немного JavaScript (скрипт jQuery) для отслеживания положения мыши и активации курсора:
|
1 2 3 4 5 6 7 |
$(document).mousemove(function(e){ o = $('.cursor').offset(); $(".dot").css({ "top": e.pageY - o.top, "left": e.pageX - o.left }); }); |
В результате у нас получилась отличная стилизация курсора, конечно, на странице где нужно делать много выбора, такой прием будет вряд ли применим, но для персональной страницы или портфолио будет в самый раз.
Вот и все. Готово!
Интересно:
| Опубликовал admin 30.04.2018 в 15:53, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...