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

Динамические информаторы требуют привлечения внимания. Каждый раз, когда происходит изменение, нужно воспроизводить визуальный эффект, чтобы пользователь увидел, что происходит. Воспользуемся анимациями 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>


Все внимание уделяем элементу , который является информатором с визуальным эффектом.

CSS

Класс .animating представляет анимацию CSS3, в которой используется [url=http://cubic-bezier.com/#0,1,1,0]кривая Безье[/url].

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

  • FalleN

  • 4650

  • 1

  • 236
Теги: menu, css3, NAV

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!