SVG фильтры: эффекты искривления кнопки

Вдохновляющее меню для сайта из линий

От автора: экспериментальный эффект искривления кнопок при помощи фильтров SVG. С помощью SVG фильтров можно придавать кнопкам интерактивности при нажатии. Именно про это мы сегодня и расскажем. Основная идея заключается в применении эффекта искривления или эффекта жидкости к кнопке и поиск возможного применения данной технологии.

скачать исходникидемо

Внимание: Пока что технология является экспериментальной и лучше всего работает в Google Chrome и Firefox. Давайте более подробно разберем эту методику.

Создаем кнопку

Для начала создадим простую кнопку:

<button class="button">Click me</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 фильтр содержит в себе список примитивов. Более подробно об этом можно прочесть в статье Лукаса. Нам в частности интересен примитив <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

Источник: http://tympanus.net/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree