Эффекты при клике не столь популярны как hover effects, однако, сегодня мой взор упал на плагин под названием waves.
Название, как вы уже наверно догадались, говорящее, а значит: картинку мы получим в виде волны. Собственно, той самой концентрической волны, а в простом варианте – темной окружности, которая возникает, если потыкать пальцем в монитор (поверьте на слово – отпечатки жирных пальцев потом крайне проблематично стираются!). К сожалению эффект не реалистичен на 100%: в реальности мы увидим некий дребезг, а на старых мониторах ещё и радужное размытие.
Наш плагин waves в этом плане слегка упрощен, но эффект клика нажатия на кнопку получается весьма необычным. Физика явления концентрических волн соблюдена, и мы видим плавно расходящуюся окружность от точки клика.
К слову говоря, эффекты при клике довольно редкое явление, которое можно увидеть на сайтах, но если вы делаете сайт полностью ориентированный на ajax, то waves - вам пригодится. Плагин написан полностью на JavaScript и не требует подключения сторонних библиотек.
Waves можно применить как на кнопках, так и на картинках, и на блоках div, и на иконках. Как данный эффект работает - предлагаю ознакомиться в материалах демо, прикреплённых к этой статье. Думаю весьма интересно и красиво.
Приступая к работе, подключаем файлы стилей и самого скрипта.
<link href="waves.min.css" type="text/css" rel="stylesheet" />
<script src="waves.min.js" type="text/javascript"></script>
Теперь мы его проинициализируем сразу же после загрузки страницы, делается это вызовам метода init() у объекта waves, в маем случае я добавлю в head HTML страницы такие строчки:
window.onload = function(){
Waves.init();
};
Добавляем HTML разметку кнопок:
<div id="box-button" class="box">
<h2>Buttons</h2>
<p class="text-center">
<a class="flat-buttons">
Button A
</a>
<button class="flat-buttons">
Button B
</button>
<input class="flat-buttons" type="submit" value="Button C">
</p>
<p id="colored-button" class="text-center">
<a class="btn float-buttons">
Button A
</a>
<button class="btn float-button-light">
Button B
</button>
<input class="btn float-buttons" type="submit" value="Button C">
</p>
</div>
И за разметкой добавляем скрипт, который будет навешивать нужный нам эффект:
Waves.attach(".flat-buttons", [
"waves-button"
]);
Waves.attach(".float-buttons", [
"waves-button",
"waves-float"
]);
Waves.attach(".float-button-light", [
"waves-button",
"waves-float",
"waves-light"
]);
Навешивание эффектов при клике происходит довольно просто. Для этого мы должны воспользоваться другим методам объекта waves attach(), в него передаётся два параметра:
- Указываем, на что навешиваем скрипт;
- Массив с классами, обеспечивающими эффект.
Подробнее об втором пункте (эффекты, которые есть у плагина):
- waves-button – в стиле полу округлённого блока;
- waves-float – обеспечивает плавное появление;
- waves-circle – в стиле округлённого блока;
- waves-block – в стиле стандартного блока.
Если вам не хватило стилей, то без проблем можно дописать нужный вариант и добивать его в массив второго параметра метода attach(). Плагин довольно гибкий в этом плане.
При инициализации плагина можно указать его настройки, их всего две: время волны при клике - duration и время задержки этого эффекта - delay.
Waves.init({
duration: 500,
delay: 200
});