В данном уроке мы рассмотрим замечательный прием с применением фильтром основанных на SVG. Такой прием мы подключим к кнопкам. Основная идея заключается в применении эффекта искажения или эффекта жидкости к кнопке. Также мы рассмотрим возможное применения данной технологии в других элементах. Обратите внимание, что данный эффект экспериментальный, по этому может работать не во всех браузерах.
Обратите внимание на то, что поддержка CSS фильтров отличается в зависимости от браузера, и эффекты могут слегка различаться. Так что всегда добавляйте fallback. Давайте приступим.
Шаг 1. HTMLДля начала нам необходимо создать основу для демонстрации, начнем мы с самого простого. Давайте создадим простую кнопку и установим для нее класс button.
<button class="button">Кнопка</button>
Теперь создадим фильтр внутри SVG объекта, который мы поместили в HTML:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
<defs>
<filter id="filter">
<feTurbulence type="fractalNoise" baseFrequency="0 0.15" numOctaves="1" result="warp" />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />
</filter>
</defs>
</svg>
Затем применим только что созданный фильтр к кнопке следующим образом:
.button {
/* остальные стили */
-webkit-filter: url("#filter");
filter: url("/#filter");
}
Обратите внимание, что сплэш, во втором варианте фильтра, крайне важен, он нужен для работы фильтра в Firefox.
Принцип работы фильтра
SVG фильтр содержит в себе список примитивов. Нам в частности интересен примитив
.
Эффект карты смещения сдвигает пиксели элемента, к которому применен фильтр на основе предоставленных значений. [b]<fedisplacementmap>[/b] можно применить к любому DOM элементу, например изображению, градиенту или другому SVG фильтру. Для нашей кнопки мы будем использовать SVG элемент [b]<feTurbulence>[/b].
[b]<feTurbulence>[/b] — примитив, генерирующий «шум» (по алгоритму шума Перлина). Что будет, если применить этот шум к нашей кнопке:
Тут огромную роль играет свойство <baseFrequency>. С его помощью генерируется сам шум. Свойство принимает два параметра, которые отвечают за эффект по Х и У координатам.
Также нужно указать источники для нашего фильтра: все фильтры принимают два источника с помощью свойств in и in2. Первый источник будет SourceGraphic (HTML элемент, к которому применяется фильтр) и вторым источником будет наш первый фильтр [b]<feTurbulence>[/b] (мы назвали его шумом).
Теперь наша карта смещения знает, что нужно двигать пиксели элемента SourceGraphic на основе сгенерированного шума [b]<feTurbulence>[/b].
С помощью свойств xChannelSelector и yChannelSelector задается цвет смещения пикселей (R, G или B) для каждой оси. Осталось анимировать эти свойства при помощи JS (мы используем библиотеку анимации Greensock).
С помощью SVG фильтров мы можем с легкостью применять к веб-элементам сложные алгоритмы наподобие карты смещения. Все сложная работа выполняется SVG фильтром, а мы лишь применяем этот фильтр и анимируем различные параметры.
Ну вот и все! Большинство эффектов в демо работают по описанному нами принципу.
Находите новые идеи в демо. Помните, что SVG фильтры применимы к любым HTML элементам, т.е. существует масса возможностей. Все зависит только от вашего воображения. Но используйте данный эффект аккуратно, он требует много ресурсов. Не применяйте эффект к большим объектам.
Вот и все. Готово!
Скачивание файлов доступно только зарегистрированным пользователям