Rippleria - эффект волновой ряби после клика на любой элемент сайта на jQuery
Очень популярная сегодня штука и каждый из вас наверняка видел на сайтах этот эффект - вы кликаете по кнопке, а из места, куда кликнули, расходится волна. Выглядит очень здорово, устанавливается вообще элементарно а использовать такую штуку на своём сайте проще простого!
Для начала посмотрите ДЕМО
Моё тестирование в редакторе: КЛИК
Проект на GitHub: ПЕРЕЙТИ
Установка:
1#: На нужных страницах между head и /head вставьте:
|
1 |
<link rel='stylesheet prefetch' href='/css/jquery.rippleria.min.css'> |
2#: На этих же страницах в самый низ перед /body поместите:
|
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> |
3#: Примеры использования в HTML кодах:
|
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> |
По сути, любому элементу достаточно просто дописать параметр data-rippleria и он уже будет обработан скриптом
Осталось лишь залить JS файл из прикреплённого архива в папку js и CSS файл в папку css
Возникли вопросы? Задайте их в комментариях
Важно: для того, чтобы эффект правильно применился к элементу, данный элемент должен иметь CSS свойство display: block; или display: inline-block;