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

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

<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, которое помогает улучшить интерфейс проекта. Экспериментируя с параметрами кривой Безье можно получить интересные визуальные эффекты.

Добавлено: 01 Мая 2018 14:55:24 Добавил: Андрей Ковальчук Нравится 0

Добавить