Всплывающий информатор с использованием анимаций 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>

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


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/zxYdNhEkMPo/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Всплывающий информатор с использованием анимаций CSS3 | | 2012-06-29 06:31:24 | | Статьи Web-мастеру | | Динамические информаторы требуют привлечения внимания. Каждый раз, когда происходит изменение, нужно воспроизводить визуальный эффект, чтобы пользователь увидел, что происходит. Воспользуемся | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: