Изящный эффект обратной связи при щелчке

Оригинал: http://tympanus.net/codrops/2015/02/11/subtle-click-feedback-effects/

Перевод: Влад Мержевич

В последнее время новые классные интерактивные эффекты были созданы, чтобы следовать принципам Google Material Design. Один из таких великолепных небольших эффектов похож на расходящиеся кругами волны при щелчке. Пока эти эффекты связаны с тем местом, куда щёлкнули или нажали, но сама идея добавить небольшой эффект обратной связи довольна интересна. Как правило, едва заметные индикаторы используются в приложениях, чтобы визуально показать место прикосновения к экрану мобильного устройства. Но подобные эффекты в действительности могут оказаться полезными, когда задействуется любой щелчок или прикосновение. Индикатор означает, что действующий элемент был нажат и, если это сделано правильно, то время отклика кажется меньшим.

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

Пожалуйста, обратите внимание, что некоторые эффекты являются экспериментальными и, соответственно, работают только в современных браузерах.

IE10 не поддерживает анимацию для псевдоэлементов, так что в нём эффекты корректно не работают.

Для демонстрации задействованы иконки из  Font Awesome, а эффекты включаются для кнопок:

<button class="cbutton cbutton--effect-boris">
  <i class="cbutton__icon fa fa-fw fa-play"></i>
  <span class="cbutton__text">Play</span>
</button>

Кнопки имеют следующий стиль:

.cbutton {
  position: relative;
  display: inline-block;
  margin: 1em;
  padding: 0;
  border: none;
  background: none;
  color: #286aab;
  font-size: 1.4em;
  transition: color 0.7s;
}
.cbutton.cbutton--click,
.cbutton:focus {
  outline: none;
  color: #3c8ddc;
}
.cbutton__icon {
  display: block;
}
.cbutton__text {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cbutton::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -35px 0 0 -35px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

При добавлении класса через JavaScript включаем эту анимацию:

/* Эффект «Boris» */
.cbutton--effect-boris::after {
  background: rgba(111,148,182,0.1);
}
.cbutton--effect-boris.cbutton--click::after {
  animation: anim-effect-boris 0.3s forwards;
}
@keyframes anim-effect-boris {
 0% {
  transform: scale3d(0.3, 0.3, 1);
 }
 25%, 50% {
  opacity: 1;
 }
 100% {
  opacity: 0;
  transform: scale3d(1.2, 1.2, 1);
 }
}

Вот гифка получившегося эффекта.

Для эффекта с названием «Stana» мы используем переход для SVG clipPath, но это на данный момент работает только в Chrome. Мы масштабируем clipPath в форме круга с целью выявления и скрытия линий.

Стилевое свойство clip-path, которое мы применяем в эффекте «Stoja», работает не во всех браузерах. Смотрите таблицу совместимости на CanIUse для подробностей.

Техника для изменения цвета в SVG использует идентификаторы в адресе изображения и основана на следующей идее Леа Веру: Change an SVG file through the URL hash. Это не работает в мобильном Safari, так что вы не увидите правильные цвета в эффектах «Azra» and «Dejan».

Надеемся, вам понравились эти изящные эффекты и вы вдохновились!