Ripple эффект — это анимация, визуально напоминающая расходящийся круг. Иногда накладывают несколько эффектов сразу и это выглядит как расходящиеся круги от брошенного камня в воду.
Область анимации ограничивают и круг расходится внутри контура нажатой кнопки или какого то элемента управления.
Что нам понадобится для создания такого эффекта? Немного javascript (я использую jQuery) и правильно настроенные CSS.
Шаблон кнопки
Нам потребуется два вложенных контейнера.
|
1 2 3 4 5 |
<div class="ripple-parent"> <div class="ripple"> Кнопка </div> </div> |
.ripple-parent — ограничивает область анимации, а .ripple — это область активации эффекта (при клике). Зоны, конечно, могут и совпадать
Настраиваем CSS
Кроме двух элементов в шаблоне, мы программно будем создавать третий (.ink), анимация которого и будет создавать необходимый эффект.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
.ripple-parent { list-style-type: none; position: relative; overflow: hidden; display: inline-block; } .ripple { display: block; user-select: none; position: relative; } /* это стили для специального контейнера, который будет создан программно. С его помощью мы создадим ripple эффект. Размер и начальную позицию контейнера мы рассчитаем программно. */ .ink { display: block; position: absolute; /* Здесь можно настроить цвет */ background: rgb(255, 180, 180); border-radius: 100%; transform: scale(0); } /* Анимация увеличит .ink в 2 раза, попутно меняя его прозрачность. */ .ink.animate { animation: ripple 0.65s linear; } @keyframes ripple { /* масштабируем в 2 раза */ 100% {opacity: 0; transform: scale(2);} } |
Скрипт для Ripple эффекта
Не забудьте подключить библиотеку jQuery. Я использую либо ту, что встроена в CMS или вариант с CDN. К примеру, вот так:
|
1 2 3 |
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </head> |
Так как эффект расходящихся кругов активируется при клике, запрограммируем это событие.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<script> (function($) { //ripple-effect var parent, ink, d, x, y; $(".ripple").click(function(e){ parent = $(this).parent(); //создаём .ink элемент, если еще не создан if (parent.find(".ink").length == 0) parent.prepend("<span class='ink'></span>"); ink = parent.find(".ink"); //сбрасываем анимацию ink.removeClass("animate"); //рассчитываем размеры .ink элемента //они определяются размерами родительского контейнера if(!ink.height() && !ink.width()) { d = Math.max(parent.outerWidth(), parent.outerHeight()); ink.css({height: d, width: d}); } //получим начальные координаты, //центр .ink нужно поместить в точку клика x = e.pageX - parent.offset().left - ink.width()/2; y = e.pageY - parent.offset().top - ink.height()/2; //установим координаты и запустим анимацию ink.css({top: y+'px', left: x+'px'}).addClass("animate"); }) })(jQuery); </script> |
Как видите всё довольно несложно. :) Можно попробовать сделать несколько кругов.
Несколько кругов
Если мы хотим увидеть несколько расходящихся кругов, то понадобится соответствующее кол-во .ink элементов. Я решил ограничиться тремя. Вот модификация скрипта для этого случая.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<script> (function($) { //ripple-tripple-effect var parent, ink, d, x, y, sizeMul; $(".ripple").click(function(e){ parent = $(this).parent(); //создаём .ink элементы, если их еще нет //каждый из "кругов" имеет свой коэффициент if (parent.find(".ink").length == 0) parent.prepend("<span class='ink' data-size='0.5'></span>" + "<span class='ink' data-size='0.7'></span>" + "<span class='ink' data-size='1'></span>"); //перебираем круги, рассчитываем их параметры parent.find(".ink").each(function () { ink = $(this); ink.removeClass("animate"); if(!ink.height() && !ink.width()) { sizeMul = $(ink).attr('data-size'); d = Math.max(parent.outerWidth(), parent.outerHeight()) * sizeMul; ink.css({height: d, width: d}); } //тут можно немного оптимизировать, //чтобы не считать радиус и координаты для каждого круга, //т.к. они не отличаются - не буду лишать вас этого //удовольствия x = e.pageX - parent.offset().left - ink.width()/2; y = e.pageY - parent.offset().top - ink.height()/2; ink.css({top: y+'px', left: x+'px'}).addClass("animate"); }); }) })(jQuery); </script> |
Смотрим как это работает «вживую» :
Ripple effects