Rippleria - эффект волновой ряби после клика на любой элемент сайта на jQuery
|
1 |
<link rel='stylesheet prefetch' href='/css/jquery.rippleria.min.css'> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script src='/js/jquery.rippleria.min.js'></script> <script> $('#rippleria').rippleria({ // Скорость анимации duration: 750, // Тип анимации easing: 'ease-in', // Цвет волны. Не обязательно указывать color: undefined, // Автоматическое определение яркости волны detectBrightness: true }); </script> |
|
1 2 3 4 5 6 7 |
<a id="rippleria" href="#"> <img src="Ссылка на картинку"> </a> <button data-rippleria>Кнопка #1</button> <button data-rippleria data-rippleria-color="blue" data-rippleria-easing="ease-in" data-rippleria-duration="1000">Кнопка #2</button> |
Важно: для того, чтобы эффект правильно применился к элементу, данный элемент должен иметь CSS свойство display: block; или display: inline-block;