Автор

Hover эффекты кнопок с помощью фильтров SVG

Hover эффекты кнопок с помощью фильтров SVG


Основная идея заключается в применении искажения или фильтры blob для кнопок и изучить некоторые творческие возможности.

Все больше разработчиков используют SVG, что заставляет развивать данное направление. Мы хотели бы поделиться некоторыми идеями для воздействия на кнопки. Применение фильтров SVG в HTML-элементы дают нам прекрасную возможность получить анимированную кнопк, и это именно то, что мы будем изучать сегодня.Основная идея заключается в применении искажения или фильтры blob для кнопок и изучить некоторые творческие возможности. Также мы рассмотрим возможное применения данной технологии в других элементах. 

 

ДЕМО
ИСХОДНИКИ

 

Внимание

Данный эффект экспериментальный, по этому может работать не во всех браузерах.

Поддержка CSS фильтров отличается в зависимости от браузера, и эффекты могут слегка различаться. Так что всегда добавляйте fallback. Давайте приступим.

 

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");
}

 

Принцип работы фильтра

SVG фильтр содержит в себе список примитивов. Нам в частности интересен примитив <fedisplacementmap>.

Эффект карты смещения сдвигает пиксели элемента, к которому применен фильтр на основе предоставленных значений. <fedisplacementmap> можно применить к любому DOM элементу, например изображению, градиенту или другому SVG фильтру. Для нашей кнопки мы будем использовать SVG элемент <feTurbulence>.

<feTurbulence> — примитив, генерирующий «шум» (по алгоритму шума Перлина). Что будет, если применить этот шум к нашей кнопке:

Принцип работы фильтра

Тут огромную роль играет свойство <baseFrequency>. С его помощью генерируется сам шум. Свойство принимает два параметра, которые отвечают за эффект по Х и У координатам.

Также нужно указать источники для нашего фильтра: все фильтры принимают два источника с помощью свойств in и in2. Первый источник будет SourceGraphic (HTML элемент, к которому применяется фильр) и вторым источником будет наш первый фильтр <feTurbulence> (мы назвали его шумом).

Теперь наша карта смещения знает, что нужно двигать пиксели элемента SourceGraphic на основе сгенерированного шума <feTurbulence>.

SourceGraphic на основе сгенерированного шума

С помощью свойств xChannelSelector и yChannelSelector задается цвет смещения пикселей (R, G или B) для каждой оси. Осталось анимировать эти свойства при помощи JS (мы используем библиотеку анимации Greensock).

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

Ну вот и все! Большинство эффектов в демо работают по описанному нами принципу.

Находите новые идеи в демо. Помните, что SVG фильтры применимы к любым HTML элементам, т.е. существует масса возможностей. Все зависит только от вашего воображения. Но используйте данный эффект аккуратно, он требует много ресурсов. Не применяйте эффект к большим объектам.

 

Вот и все. Готово!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеSVG

Hover эффекты кнопок с помощью фильтров SVG

Модальные окна стали весьма популярны, и никого уже этим не удивить, но все же не стоит забывать о таком полезном инструменте веб-мастера, в данном уроке мы рассмотрим пример нескольких различных модальных окон с помощью плагина mootools. Такие окна весьма функциональны Внешний вид и функционирование окна может быть настроено с помощью различных опций, устанавливающих прозрачность, ширину, цвет покровного слоя, возможность перетаскивания окна и другие параметры. Плагин мало весит и может выводить в модальном окне любое содержание..


Hover эффекты кнопок с помощью фильтров SVG

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


Hover эффекты кнопок с помощью фильтров SVG

Скрипт представляет собой нечто вроде плагина. Для чего можно использовать выдвижную панель? Вы можете создать выдвижной блок «Контакты» на сайт, это будет полезно, например, для сайтов с портфолио.


Hover эффекты кнопок с помощью фильтров SVG

Типографика стала играть большую роль в современном веб-дизайнеры. Создавая сайт, мы стали уделять внимание таким мелочам как шрифт и его правильное отображение, некоторые мастера предпочитают репозитории гиганта google со шрифтами, а другие собственные, подключаемые к документу, но можно пойти другим путем, и создать полную анимацию текста, для этого мы будем использовать js. В данном посте мы рассмотрим один из таких примеров. Основная идея состоит в том, что текст состоит из капель, которые можно двигать, а они будут разлетаться.


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

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


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close