SVG фільтри: ефекти викривлення кнопки

14

Від автора: експериментальний ефект викривлення кнопок за допомогою фільтрів SVG. З допомогою SVG фільтрів можна надавати кнопок інтерактивності при натисканні. Саме про це ми сьогодні і розповімо. Основна ідея полягає в застосуванні ефекту викривлення або ефекту рідини до кнопки і пошук можливого застосування даної технології.

SVG фільтри: ефекти викривлення кнопкиSVG фільтри: ефекти викривлення кнопки

Увага: Поки що технологія є експериментальною і краще всього працює в Google Chrome і Firefox. Давайте більш детально розглянемо цю методику.

Створюємо кнопку

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

Click me

З базовими стилями кнопка буде виглядати приблизно так:

SVG фільтри: ефекти викривлення кнопки

Тепер створимо фільтр всередині SVG об’єкта, який ми помістимо в HTML:

І застосовуємо тільки що створений фільтр до кнопки наступним чином:

.button {
/* інші стилі */
-webkit-filter: url (#filter»);
filter: url(«/#filter»);
}

Слеш у другому оголошенні вкрай важливий, він потрібен для роботи фільтра в Firefox.

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

SVG фільтр містить у собі список примітивів. Більш докладно про це можна прочитати в статті Лукаса. Нам зокрема цікавий примітив .

Ефект карти зміщення зрушує пікселі елемента, до якого застосовано фільтр на основі наданих значень. можна застосувати до будь-якого DOM елементу, наприклад зображення, градієнту або іншому SVG фільтру. Для нашої кнопки ми будемо використовувати SVG елемент .

— примітив, що генерує шум» (за алгоритмом шуму Перлина). Що буде, якщо застосувати цей шум до нашої кнопки:

SVG фільтри: ефекти викривлення кнопки

Тут величезну роль відіграє властивість . З його допомогою генерується сам шум. Властивість приймає два параметри, які відповідають за ефект за координатами Х і У. Поиграйтесь з повзунками, щоб зрозуміти принцип:

Тепер застосуємо фільтра і подивимося, що відбудеться:

SVG фільтри: ефекти викривлення кнопки

Тут важлива властивість – scale – з його допомогою задається сила ефекту.

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

Тепер наша карта зміщення знає, що потрібно рухати пікселі елемента SourceGraphic на основі згенерованого шуму .

З допомогою свойсвт xChannelSelector і yChannelSelector задається колір зсуву пікселів (R, G або B) для кожної осі.
Залишилося анімувати ці властивості за допомогою JS (ми використовуємо бібліотеки анімації Greensock):

З фільтром можна експериментувати, його можна застосувати до будь-якого Елементу HTML. У демо нижче ми застосували його до області textarea:

Багато прихованих можливостей SVG фільтри: ефекти викривлення кнопки

З допомогою SVG фільтрів ми можемо з легкістю застосовувати до веб-елементів складні алгоритми зразок карти зміщення. Всі складна робота виконується SVG фільтром, а ми лише застосовуємо цей фільтр і анимируем різні параметри.

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

Знаходьте нові ідеї в демо. Пам’ятайте, що SVG фільтри застосовуються до будь-яких елементів HTML, тобто існує маса можливостей. Все залежить тільки від вашої уяви. Але використовувати даний ефект акуратно, він вимагає багато ресурсів. Не застосовуйте ефект до великих об’єктів.

Зверніть увагу на те, що підтримка CSS фільтрів відрізняється в залежності від браузера, і ефекти можуть злегка відрізнятися. Так що завжди додавайте фолбэк.

Сподіваємося вам сподобався ефект, і стаття виявилася корисною для вас». Наш проект на Github.