Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Набор эффектов для клика мыши и сенсорных взаимодействий

Дата добавления: 11.02.2015 - 21:55
Добавил: Buger
Количество просмотров: 1486
Количество комментариев: 0
Размер файла: 506.4Kb
Рейтинг материала: 5.0 / 2
Набор эффектов для клика мыши и сенсорных взаимодействий
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 5.0
/
голосов 2
Набор эффектов для клика мыши и сенсорных взаимодействий, вдохновленные визуализациями при кликах мышкой и нажатиями на экране в мобильных приложениях. Эффекты сделаны при помощи CSS-анимации, в основном на псевдо-элементах.

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

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

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

Что касается IE10, то похоже он не поддерживает animationend на псевдо-элементах, так что вы не увидите как работает там эффект.

Для демонстрации мы будем использовать значки шрифта 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 мы вызываем анимацию(и):
Код
/* Effect 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);
  }
}

Вот GIF изображение одного из эффектов:



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



Свойство CSS clip-path, которое мы используем в эффекте "Stoja" не работает в любом браузере. Смотрите таблицу поддержки CanIUse для CSS свойства clip-path для более подробной информации.



Способ изменения цвета SVGs при помощи идентификатора в исходном изображении на основе Lea Verou: Изменение файла SVG через хэш URL

Надеюсь что, вам понравятся эти эффекты и вы получите от них вдохновение smile

DEMO


Источник: Не указан
Добавлять комментарии могут только зарегистрированные пользователи.