Главная » jQuery » Эффект пульсации при клике с помощью CSS3 и jQuery

Эффект пульсации при клике с помощью CSS3 и jQuery

Материальный дизайн (Material Design) от компании Google, в котором анимации не просто оживляют интерфейс, но и представляют пользователю, что происходит. Завораживающие идеи о трехмерном пространстве не оставили равнодушными большую часть сообщества веб-разработчиков и дизайнеров всех мастей.
Фрейморки использующие принципы материального дизайна выходят в свет один за одним и используются не только для унификации интерфейсов приложений ОС Андроид, но для разработки элементов интерфейса веб-сайтов.
Многие фичи из состава материального дизайна можно очень даже просто воспроизвести у себя на сайте и без подключения фреймворков. Что я сегодня вам и продемонстрирую, на примере реализации эффекта пульсации (), или если хотите, эффекта расходящихся кругов на воде(ряби), при клике на любой части страницы.
 
Эффект пульсации при клике

Для этого нам понадобится: заблаговременно подключенная библиотека javascript jQuery, небольшой плагин для запуска эффекта и немного магии -анимации.

Начнём с рассмотрения кода CSS, сформируем стили и настроим анимацию @keyframes.

CSS

Для тега <html> обозначим высоту документа в 100%.

html {
  height:100%;
}

Далее сформируем стили самого эффекта. Краткие комментарии к коду, помогут быстрее разобраться что к чему:

.ripple {
  position: relative;
  overflow: hidden;
  -webkit-transform: translate(0);
}
/* параметры визуального элемента эффекта */
.effekt {
  display: block;
  position: absolute;
  pointer-events: none;
/* абсолютно круглый */
  border-radius: 50%;
/* Увеличение или уменьшение размера элемента */
  transform: scale(0);
/* располагаем выше других объектов веб-страницы */
  z-index:9999;
/* цвет фона элемента */
  background: rgba(52, 152, 219,.7);
/* не прозрачный */
  opacity: 1;
}
/* имя, длительность и изменение скорости анимации */
.effekt.replay {
  -webkit-animation: ripple 2s cubic-bezier(0.165, 0.85, 0.45, 1);
  -o-animation: ripple 2s cubic-bezier(0.165, 0.85, 0.45, 1);
  animation: ripple 2s cubic-bezier(0.165, 0.85, 0.45, 1);
}

Теперь подготовим анимацию для разных браузеров используя префиксы, имя анимации, как мы помним ripple:

@keyframes ripple {
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
}
@-webkit-keyframes ripple {
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
}
@-moz-keyframes ripple {
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
}
@-ms-keyframes ripple {
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
}
@-o-keyframes ripple {
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
}

На стороне CSS мы всё подготовили, остаётся подключить библиотеку jQuery к документу, если вы ещё этого не сделали. В примере, подключил библиотеку напрямую из Google CDN, перед закрывающим тегом достаточно разместить следующую строку:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Далее запускаем небольшой плагин, в котором определяем, для какого элемента будет воспроизведён эффект, в нашем случае это вся видимая часть страницы html. Для видимой части эффекта используем тег с соответствующим классом.

Регулировать диаметр расходящегося круга, вы можете изменяя значения height: d/5, width: d/5. Только следует помнить, что уменьшая значения вы увеличиваете диаметр круга, а увеличивая, наоборот уменьшаете. Вот такая круговерть))). Привычнее указывать равнозначные величины в пикселях, например height: 150 и width: 150, что собственно вы можете и делать. Больше в плагине, особо настраивать и нечего.

<script type="text/javascript">
    // Объект для которого будет применён эффект
$("html").click(function(e){
	var ripple = $(this);
    // визуальный элемент эффекта
	if(ripple.find(".effekt").length == 0) {
		ripple.append("<span class='effekt'></span>");
	}
	var efekt = ripple.find(".effekt");
	efekt.removeClass("replay");
	if(!efekt.height() && !efekt.width())
	{
		var d = Math.max(ripple.outerWidth(), ripple.outerHeight());
		efekt.css({height: d/5, width: d/5});// Определяем размеры элемента эффекта 
	}
	var x = e.pageX - ripple.offset().left - efekt.width()/2;
	var y = e.pageY - ripple.offset().top - efekt.height()/2;
	efekt.css({
		top: y+'px',
		left:x+'px'
	}).addClass("replay");
})
</script>

Если всё сделаете правильно, получите в своё распоряжение ещё одну замечательную дизайнерскую фишку. Такой эффект, вы можете применять к любым блочным элементам вашего сайта, для этого достаточно его указать в исполняемом js. Например, вы хотите применить ripple-эффект к div-контейнеру с содержанием статей, который имеет класс content допустим. В jQuery плагине определяете функцию именно для этого элемента. Тогда, если применительно к нашему примеру, $("html") заменяете на $("div.content"), первая строка в коде плагина будет выглядеть так:

$("div.content").click(function(e)

Кнопки и другие активные элементы работают с эффектом по тому же принципу.

Ещё раз посмотрите живой пример работы плагина и при желании, смело забирайте исходники.

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru