От автора: экспериментальный эффект искривления кнопок при помощи фильтров SVG. С помощью SVG фильтров можно придавать кнопкам интерактивности при нажатии. Именно про это мы сегодня и расскажем. Основная идея заключается в применении эффекта искривления или эффекта жидкости к кнопке и поиск возможного применения данной технологии.
Внимание: Пока что технология является экспериментальной и лучше всего работает в Google Chrome и Firefox. Давайте более подробно разберем эту методику.
Создаем кнопку
Для начала создадим простую кнопку:
|
1 |
<button class="button">Click me</button> |
С базовыми стилями кнопка будет выглядеть примерно так:
Теперь создадим фильтр внутри SVG объекта, который мы поместим в HTML:
|
1 2 3 4 5 6 7 8 |
<svg xmlns="//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> |
И применяем только что созданный фильтр к кнопке следующим образом:
|
1 2 3 4 5 |
.button { /* остальные стили */ -webkit-filter: url("#filter"); filter: url("/#filter"); } |
Слэш во втором объявлении крайне важен, он нужен для работы фильтра в Firefox.
Принцип работы фильтра
SVG фильтр содержит в себе список примитивов. Более подробно об этом можно прочесть в статье Лукаса. Нам в частности интересен примитив <fedisplacementmap>.
Эффект карты смещения сдвигает пиксели элемента, к которому применен фильтр на основе предоставленных значений. <fedisplacementmap> можно применить к любому DOM элементу, например изображению, градиенту или другому SVG фильтру. Для нашей кнопки мы будем использовать SVG элемент <feTurbulence>.
<feTurbulence> — примитив, генерирующий «шум» (по алгоритму шума Перлина). Что будет, если применить этот шум к нашей кнопке:
Тут огромную роль играет свойство <baseFrequency>. С его помощью генерируется сам шум. Свойство принимает два параметра, которые отвечают за эффект по Х и У координатам. Поиграйтесь с ползунками, чтобы понять принцип:
Теперь применим фильтра <fedisplacementmap> и посмотрим, что произойдет:
Тут важное свойство – scale – с его помощью задается сила эффекта.
Также нужно указать источники для нашего фильтра: все фильтры принимают два источника с помощью свойств in и in2. Первый источник будет SourceGraphic (HTML элемент, к которому применяется фильр) и вторым источником будет наш первый фильтр <feTurbulence> (мы назвали его шумом).
Теперь наша карта смещения знает, что нужно двигать пиксели элемента SourceGraphic на основе сгенерированного шума <feTurbulence>.
С помощью свойсвт xChannelSelector и yChannelSelector задается цвет смещения пикселей (R, G или B) для каждой оси.
Осталось анимировать эти свойства при помощи JS (мы используем библиотеку анимации Greensock):
С фильтром можно экспериментировать, его можно применить к любому HTML Элементу. В демо ниже мы применили его к области textarea:
Много скрытых возможностей 🙂
С помощью SVG фильтров мы можем с легкостью применять к веб-элементам сложные алгоритмы наподобие карты смещения. Все сложная работа выполняется SVG фильтром, а мы лишь применяем этот фильтр и анимируем различные параметры.
Ну вот и все! Большинство эффектов в демо работают по описанному нами принципу.
Находите новые идеи в демо. Помните, что SVG фильтры применимы к любым HTML элементам, т.е. существует масса возможностей. Все зависит только от вашего воображения. Но используйте данный эффект аккуратно, он требует много ресурсов. Не применяйте эффект к большим объектам.
Обратите внимание на то, что поддержка CSS фильтров отличается в зависимости от браузера, и эффекты могут слегка различаться. Так что всегда добавляйте фолбэк.
Надеемся вам понравился эффект, и статья оказалась полезной для вас». Наш проект на Github.
Автор: Adrien Denat
Источник: //tympanus.net/
Редакция: Команда webformyself.
