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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ноябрь 1, 2015 г.

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

Читать

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

Апрель 7, 2017 г.

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

Читать

 

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

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



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