Создаём ripple эффект

Ripple эффект — это анимация, визуально напоминающая расходящийся круг. Иногда накладывают несколько эффектов сразу и это выглядит как расходящиеся круги от брошенного камня в воду.

Область анимации ограничивают и круг расходится внутри контура нажатой кнопки или какого то элемента управления.

Что нам понадобится для создания такого эффекта? Немного javascript (я использую jQuery) и правильно настроенные CSS.

Шаблон кнопки

Нам потребуется два вложенных контейнера.

.ripple-parent — ограничивает область анимации, а .ripple — это область активации эффекта (при клике). Зоны, конечно, могут и совпадать

Настраиваем CSS

Кроме двух элементов в шаблоне, мы программно будем создавать третий (.ink), анимация которого и будет создавать необходимый эффект.

Скрипт для Ripple эффекта

Не забудьте подключить библиотеку jQuery. Я использую либо ту, что встроена в CMS или вариант с CDN. К примеру, вот так:

Так как эффект расходящихся кругов активируется при клике, запрограммируем это событие.

Как видите всё довольно несложно. :) Можно попробовать сделать несколько кругов.

Несколько кругов

Если мы хотим увидеть несколько расходящихся кругов, то понадобится соответствующее кол-во .ink элементов. Я решил ограничиться тремя. Вот модификация скрипта для этого случая.

Смотрим как это работает «вживую» :

Тройной ripple
Одинарный ripple
 

Написать комментарий

Мало букафф? Читайте есчо !

Эффект, затрудняющий прочтение текста

Август 1, 2018 г.

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

Читать

Эффект тряски элемента на сайте при наведении с помощью CCS3

Октябрь 23, 2015 г.

В последнее время как то кучно пошло у меня использование CCS3 анимации. Продолжаю делиться шаблонами. Сегодня рассмотрим анимацию, которая, запускаясь при наведении, имитирует дрожание элемента. Её можно подключать и в других случаях (не только при наведении). ...

Читать

 

Комментарии к «Создаём ripple эффект»

Понравилась статья? Есть вопросы? - пишите в комментариях.



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