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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Виджетик для сравнения двух картинок

Ноябрь 1, 2015 г.

Этот виджет может найти применение для сайта дизайнера или фотографа, которые занимаются реставрацией или обработкой изображений. Наверное, приложений ...

Читать

Zoom-эффект на CSS3

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

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

Читать

 

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

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



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

Один комментарий в “Создаём ripple эффект”