Елегантний ефект зворотного зв'язку при клацанні

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

Сподіваємося, вам сподобались ці вишукані ефекти та вас надихнули!