—»     —»   Элемент оповещения на keyframe-анимации CSS3
  Раздел: Анимация, CSS/Style Sheets   Комментариев: 1  

Элемент оповещения на keyframe-анимации CSS3



Недавно мы работали над одним проектом, в котором нам нужно было как-то акцентировать внимание на важных оповещениях. В целом, каждый раз когда менялось оповещение, нужно было сопроводить это визуальным эффектом, чтобы привлечь внимание посетителя. Мы реализовали это с помощью пошаговой анимации на CSS3.

Элемент оповещения на keyframe-анимации CSS3

HTML

В данном примере мы воспользуемся структурой разметки из нашего выпадающего меню на CSS3.

<ul class="menu">
<li><a href="">Dashboard</a></li>
<li><a href="">Stats</a></li>
<li>
<a href="">
Todo list
<span class="bubble">9</span>
</a>
</li>
<li><a href="">Settings</a></li>
</ul>

Акцент будет на «span class="bubble"», который является облачком оповещения, которое нам нужно анимировать.

CSS

Класс .animating отображает CSS3-анимацию, которая использует кривую Безье.

.animating{
animation: animate 1s cubic-bezier(0,1,1,0);
}

@keyframes animate{
from {
transform: scale(1);
}
to {
transform: scale(1.7);
}
}

jQuery

Не так-то просто перезапустить анимацию, и Крис Койер написал отличную статью, посвященную этому.

Выбранный нами метод включает использование метода setTimeout() из javascript. Итак, каждый раз когда значение оповещения изменяется, класс .animating исключается по прошествии секунды (примерно столько длится анимация).

Вам не понадобится переменная counterValue. Здесь она используется лишь для того, чтобы иметь возможность повышать и понижать значение.

var counterValue = parseInt($('.bubble').html()); // Get the current bubble value

function removeAnimation(){
setTimeout(function() {
$('.bubble').removeClass('animating')
}, 1000);
}

$('#decrease').on('click',function(){
counterValue--; // decrement
$('.bubble').html(counterValue).addClass('animating'); // animate it
removeAnimation(); // remove CSS animating class
})

$('#increase').on('click',function(){
counterValue++; // increment
$('.bubble').html(counterValue).addClass('animating'); // animate it
removeAnimation(); // remove CSS animating class

* Посмотреть демо

Просто, но эффективно

Нам кажется, что наш сегодняшний пример очень практичный, и отлично отображает то, как можно использовать анимации из CSS3. У вас будет возможность поэкспериментировать со значения кривой Безье и добиться других отличных эффектов. Спасибо за чтение! Хотелось бы услышать ваше мнение.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, jQuery
Опубликовал Design FactoRy   Прочитано (раз): 5813   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 29 июля 2012 @ 10:02
Написал: Оксана — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Очень полезная штука! Спасибо!
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930