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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Анимация ожидания загрузки/обновления, используя CSS3

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

Одна из типичных задач для улучшения пользовательского интерфейса на сайтах - это визуализация ожидания загрузки/обновления страницы. Наиболее частый случай ...

Читать

Эффект исчезновения/появления цветности CCS3

Апрель 7, 2017 г.

Среди простых, но эффектных способов оживить картинки на сайте есть следующий визуальный эффект, для которого нужны лишь CSS3 стили. Назовем его - "игра ...

Читать

 

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

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



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