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

21 мая 2015 Антон Кулешов 2975 0

Эффекты при клике не столь популярны как 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(), в него передаётся два параметра:

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

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

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

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

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

Waves.init({
	duration: 500,
	delay: 200
});
Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Делаем красивые модальные окна при помощи «Sweet Alert» плагина

11 октября 2014 Антон Кулешов

Если вы любите выводить сообщения пользователям через модальные окна браузера, то наверняка хотели бы изменить их скучный дизайн на более красивый. В этой статье я расскажу вам про одно из готовых решений, которое позволяет это сделать.

Часы на JavaScript

21 июля 2014 Антон Кулешов

Часы являются одним из простых скриптов, но, одновременно с тем, и наиболее часто используемым для сайта. На его основе можно сделать различные таймеры, а также анимацию, зависящую от времени. Сегодня я расскажу, как сделать часы на JavaScript двумя способами.

Ajax-загрузка данных на сервер

16 июля 2015 Антон Кулешов

Хороший скрипт – это инструмент, который сэкономит вам массу времени и нервных клеток при разработке веб-приложения. По своему опыту создания сайтов знаю, что значительную часть времени приходиться тратить именно на поиск готовых «велосипедов» и решений, которые упрощают нашу работу. Сегодня мы затронем одну из важнейших тем – загрузка файлов или картинок на сервер при помощи ajax. И, хотя есть множество статьей и скриптов, я расскажу своё видение данной проблемы и её решения у себя в проекте.