Всплывающий информатор с использованием анимаций CSS3

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

 

Для нашего примера будет использоваться обычная структура меню на основе неупорядоченного списка:

<ul class="menu">

    <li><a href="">Главная</a></li>

    <li><a href="">Статистика</a></li>

    <li>

                <a href="">

                               Задачи

                               <span class="bubble">9</span>

                </a>

    </li>

    <li><a href="">Настройка</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

Запустить анимацию снова не так-то просто, как может показаться с первого взгляда. На нашем сайте есть перевод статьи авторства Chris Coyier о решении такой задачи.

Для нашего примера используется метод с функцией JavaScript setTimeout(). Каждый раз, когда значение информатора изменяется, класс .animatingудаляется спустя секунду (точное время длительности анимации).

В реальных проектах вам не потребуется переменная counterValue. Она используется только для обеспечения возможности увеличения и уменьшения значения информатора на демонстрационной странице.

var counterValue = parseInt($('.bubble').html()); // Получаем текущее значение информатора

function removeAnimation(){

                setTimeout(function() {

                               $('.bubble').removeClass('animating')

                }, 1000);                                             

}

$('#decrease').on('click',function(){

                counterValue--; // Уменьшаем

                $('.bubble').html(counterValue).addClass('animating'); // Включаем анимацию

                removeAnimation(); // Удаляем класс анимации

})

$('#increase').on('click',function(){

                counterValue++; // Увеличиваем

                $('.bubble').html(counterValue).addClass('animating'); // Включаем анимацию

        removeAnimation(); // Удаляем класс анимации

})

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

Данный урок демонстрирует простое и практичное применение анимаций CSS3, которое помогает улучшить интерфейс проекта. Экспериментируя с параметрами кривой Безье можно получить интересные визуальные эффекты.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.red-team-design.com/notification-bubble-css3-keyframe-animation
Перевел: Сергей Фастунов