Показать Меню
falbar Плагин Waves

Waves - волна под курсором!

Плагин Waves

Эффекты при клике не столь популярны как 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>

И за разметкой добавляем скрипт, который будет навешивать нужный нам эффект:

<script type="text/javascript">
	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"
	]);
</script>

Навешивание эффектов при клике происходит довольно просто. Для этого мы должны воспользоваться другим методам объекта Waves attach(), в него передаётся два параметра:

  1. Указываем, на что навешиваем скрипт;
  2. Массив с классами, обеспечивающими эффект.

Подробнее об втором пункте (эффекты, которые есть у плагина):

  • waves-button – в стиле полу округлённого блока;
  • waves-float – обеспечивает плавное появление;
  • waves-circle – в стиле округлённого блока;
  • waves-block – в стиле стандартного блока.

Если Вам не хватило стилей, то без проблем можно дописать нужный вариант и добивать его в массив второго параметра метода attach(). Плагин довольно гибкий в этом плане.

При инициализации плагина можно указать его настройки, их всего две: время волны при клике - duration и время задержки этого эффекта - delay.

Waves.init({
	duration: 500,
	delay: 200
});
Источник
fian.my.id

Подписаться на обновления

Комментариев еще не оставлено