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



Мери Лу

Оригинал: 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».

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

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.