Автор

09 02.2017
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 элементам, т.е. существует масса возможностей. Все зависит только от вашего воображения. Но используйте данный эффект аккуратно, он требует много ресурсов. Не применяйте эффект к большим объектам.

 

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


vk.com/club.ssdru

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


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

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

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


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

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


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close