Приветствую всех пользователей проекта Голос!
В этой статье я хотел бы поделиться небольшой анимацией, которая, уверен, пригодится Вам в разработке какого-нибудь собственного сайта.
Я расскажу как сделать очень легко и просто анимированный колокольчик, который можно использовать в кнопках, заголовках, всплывающих окнах... да вообще везде!
Для начала нам нужна картинка самого колокольчика. В нашем примере будем использовать этот (да, он белого цвета):
Ссылка на него здесь
Сразу расскажу про результат сего действия: сделаем мы обыкновенную кнопку, а её результат будет выглядеть так:
Естественно, колокольчик у нас будет анимирован. Готовый пример Вы можете посмотреть и потестировать по этой ссылке
Немного расскажу о том, что же мы там натворили:
Структура нашей кнопки до неприличности проста:
<button>Перезвонить<i></i></button>Не буду вдаваться в мелкие подробности касательно стилей для оформления кнопки и иконки. Остановлюсь подробней на стилях для анимации колокольчика:
Сама анимация колокольчика на CSS выглядит так:
@keyframes icon-bell {
0% {transform: rotate(-15deg);}
10% {transform: rotate(15deg);}
20% {transform: rotate(-18deg);}
30% {transform: rotate(18deg);}
40% {transform: rotate(-22deg);}
50% {transform: rotate(22deg);}
60% {transform: rotate(-18deg);}
70% {transform: rotate(18deg);}
80% {transform: rotate(-12deg);}
90% {transform: rotate(12deg);}
100% {transform: rotate(0deg);}
}
Здесь всё просто - мы заставляем нашу иконку поворачиваться на определенный градус. Немного сложнее обстоит дело в том, чтобы заставить эту иконку двигаться точно как колокольчик, да еще и останавливаться время от времени.
Запускать анимацию время от времени нам поможет совсем немного знаний JS:
setInterval(function() {
$('i').toggleClass('active');
}, 3000);
Мы добавляем/удаляем класс active для нашей иконки с интервалом в 3 секунды. Остался нерешенным один вопрос: а что же у нас за свойства у класса active? Вот они:
animation-name: icon-bell;
animation-duration: 0.75s;
animation-timing-function: linear;
animation-iteration-count: 3;
animation-name: свойство, которое указывает на имя анимации, которое будет срабатывать.
animation-duration: свойство, которое показывает время длительности одного цикла анимации.
animation-timing-function: свойство, которое показывает при помощи какой математический функции запускать нашу анимацию (к примеру, равномерно от 0 до 100%, начиная быстро и заканчивая медленно, начиная медленно и заканчивая быстро и т.п.). В нашем случае будет равномерная линейная функция. Анимация будет происходить равномерно на всех отрезках времени.
animation-iteration-count: свойство, которое указывает сколько раз наша анимация будет срабатывать. В нашем случае анимация три раза пройдет весь свой цикл, и выключится. Именно для того, чтобы запустить эти три повторения еще раз, мы и дописываем небольшой JS-скрипт, который бесконечно будет её запускать.
На этом всё,
Спасибо за внимание :)
Буду рад ответить всем на Ваши вопросы, буду рад видеть всех и каждого у себя в подписчиках, буду признателен за Ваши лайки и отзывы.
