главная

Теги:


Анимированный баннер на jQuery

В данном уроке мы сделаем анимированный баннер с помощью jQuery. Суть идеи заключается в том, чтобы поэтапно анимировать различные элементы баннера с применением различных графических эффектов.

Будут использоваться плагины для jQuery Easing и 2D Transform для создания стильных эффектов анимации.

Изображения, которые использовались для демонстрации (мобильные телефоны и системные блоки), создал Alex Gillis. Вы можете найти его работы на сайте Deviantart. Изображение Dell Vostro создал Steven Housden, а его работы можно найти на его странице на сайте Deviantart.

Итак, начнем!

Разметка

Код HTML баннера будет содержать элементы div: основной и slide. Элемент div slide нужен для организации рамки вокруг баннера (если она нужна).

Затем в баннер добавляется несколько зон. Данные зоны содержат изображения, которые будут анимировано выводиться и скрываться в поле баннера в зависимости от текущего кадра. Первая зона содержит изображения всех товаров. Вторая зона используется для рекламных надписей, а третья зона содержит два различных заголовка:

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

CSS

Сначала определим стиль для баннера. Он имеет отступы и очень тонкую рамку, которая в сочетании с тенью создает отличный эффект:

.ca_banner{
	position:relative;
	overflow:hidden;
	background:#f0f0f0;
	padding:10px;
	border:1px solid #fff;
	-moz-box-shadow:0px 0px 2px #aaa inset;
}

В демонстрации также используется выравнивание плавающих блоков влево, так как мы хотим выводить два баннера рядом. Собственные стили для баннера 1 (например, его размер) будет определен позже. Элемент slide просто заполняет элемент баннера:

.ca_slide{
	width:100%;
	height:100%;
	position:relative;
	overflow:hidden;
}

Зоны позиционируются абсолютно. Собственные стили для зон будут определяться позже:

.ca_zone{
	position:absolute;
	width:100%;
}

Ширине присваивается значение 100% потому, что в браузере Chrome возникает ошибка при выводе и скрытии элементов. А с таким значением все работает отлично.

Контейнер для изображения в зоне имеет свойство display:table-cell потому, что мы хотим центрировать изображение внутри него. В некоторых эффектах будет изменяться масштаб картинки при выводе и скрытии изображения, и так мы будем уверены, что она остается в центре контейнера:

.ca_wrap{
	position:relative;
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}

По этой же причине мы устанавливаем для изображения свойство display:inline. Применить выравнивание текста к блочному элементу нельзя, но с помощью jQuery мы выводим блок правильно:

.ca_wrap img.ca_shown{
	display:inline !important;
}

Затем определяются собственные стили для баннера 1, его зон и контейнеров:

.ca_banner1{
	width:650px;
	height:300px;
}

Класс для фона, который будет использоваться для элемента div вместе с классом “slide”:

.ca_bg1{
	background:#fff url(../images/bg.jpg) no-repeat top left;
}

Зоны получают информацию о позиционировании, а для контейнеров устанавливаются размеры. Нужно, чтобы все изображения для одной зоны имели одинаковый размер, так как в Javascript будет определяться максимальный размер при проведении операций масштабирования:

.ca_banner1 .ca_zone1{
	top:0px;
	left:0px;
}
.ca_banner1 .ca_wrap1{
	width:320px;
	height:300px;
}
.ca_banner1 .ca_zone2{
	top:100px;
	left:240px;
}
.ca_banner1 .ca_wrap2{
	width:387px;
	height:203px;
}
.ca_banner1 .ca_zone3{
	top:32px;
	left:250px;
}
.ca_banner1 .ca_wrap3{
	width:378px;
	height:31px;
}

Если у вас есть еще баннеры, то для них тоже нужно определить стили для зон и контейнеров, но с изменением номера баннера. В демонстрации определяются стили для баннера 2.

JavaScript

Так как наш скрипт будет работать как плагин, нужно определить несколько параметров для него.

Переменная “steps” имеет структуру steps:[step1,step2,...,stepN].

Для каждого шага мы определяем переход для каждой зоны/области в баннере.

В нашем примере в первом баннере у нас определены 3 зоны, каждая со своим набором изображений (изображения внутри div “ca_wrap”). Одно из изображений выводится по умолчанию, в нашем примере это первое изображение (1).

Первый шаг/трансформация:

[{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}],
[{"to" : "1"}, {}],
[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]

На первом шаге первая и третья зона будут выводить второе изображение, а вторая зона останется без изменений. Когда мы изменяем каждое изображение, то используем какой-нибудь анимационный эффект, который определен в плагине.

В первом баннер будет 5 шагов. Вот как они определяются в коде:

$('#ca_banner1').banner({
	steps : [
		[
			//1 шаг:
			[{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}],
			[{"to" : "1"}, {}],
			[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]
		],
		[
			//2 шаг:
			[{"to" : "3"}, {"effect":"slideOutTop-slideInTop"}],
			[{"to" : "1"}, {}],
			[{"to" : "2"}, {}]
		],
		[
			//3 шаг:
			[{"to" : "4"}, {"effect": "zoomOut-zoomIn"}],
			[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}],
			[{"to" : "2"}, {}]
		],
		[
			//4 шаг
			[{"to" : "5"}, {"effect": "slideOutBottom-slideInTop"}],
			[{"to" : "2"}, {}],
			[{"to" : "3"}, {"effect": "zoomOut-zoomIn"}]
		],
		[
			//5 шаг
			[{"to" : "1"}, {"effect": "slideOutLeft-slideInLeft"}],
			[{"to" : "1"}, {"effect": "zoomOut-zoomIn"}],
			[{"to" : "1"}, {"effect": "slideOutRight-slideInRight"}]
		]
	],
	total_steps	: 5,
	speed : 3000
});

В плагине определяются следующие 11 эффектов (3 из них закомментированы в коде, так как "затухание" работает с ошибками в IE с полупрозрачными изображениями; если вы будете использовать изображения в формате GIF или PNG-8 вы можете задействовать закомментированные анимации):

  zoomOut-zoomInRotated
  zoomOutRotated-zoomInRotated
  zoomOut-zoomIn
  slideOutRight-slideInRight
  slideOutLeft-slideInLeft
  slideOutTop-slideInTop
  slideOutBottom-slideInTop
  slideOutTop-slideInBottom
  fadeOut-fadeIn закомментировано
  fadeOut-zoomIn закомментировано
  zoomOut-fadeIn закомментировано


Конечно, вы можете определить свои эффекты, просто добавив их в часть плагина “switch(effect)”.

Готово!

Источник урока: tympanus.net/codrops/2010/10/18/custom-animation-banner/

Урок Создан:2011-02-10 Просмотров:2980

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


Copyright© 2009 Hosted by Zhost