Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Набор эффектов для клика мыши и сенсорных взаимодействий
Дата добавления: 11.02.2015 - 21:55
Добавил: Buger
Количество просмотров: 8.7k
Количество комментариев: 0
Размер файла: 506.4 Kb
Рейтинг материала: 3.8 / 4
БЕСПЛАТНО
рейтинг
3.8
/
голосов
4
Набор эффектов для клика мыши и сенсорных взаимодействий, вдохновленные визуализациями при кликах мышкой и нажатиями на экране в мобильных приложениях. Эффекты сделаны при помощи CSS-анимации, в основном на псевдо-элементах.
В последнее время были созданы многие интересные эффекты взаимодействия, что следует принципам Google Material Design. Эти эффекты основаны на месте щелчка или прикосновения. Как правило, тонкие индикаторы, используемые в приложениях демонстрируют визуализацию на экране мобильного телефона. Такого рода эффекты могут быть фактически весьма полезными как для кликов мыши, так и для сенсорного взаимодействия.
Сегодня мы хотели бы изучить некоторые из этих эффектов, используя различные анимации. В настоящее время есть много видов анимации.
Обратите внимание на то, что некоторые из эффектов являются экспериментальными и следовательно работать будут только в современных браузерах.
Что касается IE10, то похоже он не поддерживает animationend на псевдо-элементах, так что вы не увидите как работает там эффект.
Для демонстрации мы будем использовать значки шрифта Font Awesome и вызывание эффекта на кнопке:
Кнопки будут иметь следующий общий стиль:
При добавлении класса с JavaScript мы вызываем анимацию(и):
Вот GIF изображение одного из эффектов:
Для эффекта "Stana", мы используем переход на SVG clipPath, то, что работает только в Chrome на данный момент. Мы в основном масштабируем clipPath в форме кольца для выявления и скрываем линии.
Свойство CSS clip-path, которое мы используем в эффекте "Stoja" не работает в любом браузере. Смотрите таблицу поддержки CanIUse для CSS свойства clip-path для более подробной информации.
Способ изменения цвета SVGs при помощи идентификатора в исходном изображении на основе Lea Verou: Изменение файла SVG через хэш URL
Надеюсь что, вам понравятся эти эффекты и вы получите от них вдохновение
В последнее время были созданы многие интересные эффекты взаимодействия, что следует принципам 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>
<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;
}
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);
}
}
.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
Надеюсь что, вам понравятся эти эффекты и вы получите от них вдохновение
DEMO
Добавлять комментарии могут только зарегистрированные пользователи.
Поделись с друзьями:
