Анимированное меню с выскальзывающим текстом и иконкой

В данном уроке мы сделаем меню с эффектом выскальзывания при наведении курсора мыши на пункт. Идея заключается в том, что элементы выскальзывают из поля зрения, изменяют цвет и возвращаются обратно.

 

Разметка HTML

Меню будет представлено неупорядоченным списком, где каждый пункт содержит элемент ссылки с тремя составляющими, которые будут анимироваться:

<ul id="sti-menu" class="sti-menu">
	<li data-hovercolor="#37c5e9">
		<a href="#">
			<h2 data-type="mText" class="sti-item">
				Текст
			</h2>
			<h3 data-type="sText" class="sti-item">
				Другой текст
			</h3>
			<span data-type="icon" class="sti-icon sti-icon-care sti-item">
			</span>
		</a>
	</li>
	<li>...</li>
	...
</ul>

Атрибут data-hovercolor будет использоваться для установки цвета текста при наведении курсора мыши. Также, каждому элементу в ссылке задается атрибут data-type с определением типа, которое используется в JavaScript.

 

CSS

Сначала осуществляется сброс CSS с помощью файла reset.css. Затем мы задаем стиль для неупорядоченного списка и устанавливаем для него фиксированную ширину, чтобы его можно было центрировать на странице:

.sti-menu{
	width:1010px;
	position:relative;
	margin:60px auto 0 auto;
}

Элементы списка будут плавающими и иметь небольшое поле:

.sti-menu li{
	float:left;
	width:200px;
	height:300px;
	margin:1px;
}

Теперь задаем стиль для ссылки. Все выступающие части будут скрываться, так как мы будем использовать анимацию элементов за их пределами:

.sti-menu li a{
	display:block;
	overflow:hidden;
	background:#fff;
	text-align:center;
	height:100%;
	width:100%;
	position:relative;
	-moz-box-shadow:1px 1px 2px #ddd;
	-webkit-box-shadow:1px 1px 2px #ddd;
	box-shadow:1px 1px 2px #ddd;
}

Заголовки будут позиционироваться абсолютно, и мы определяем их ширину и смещение сверху:

.sti-menu li a h2{
	color:#000;
	font-family: 'Wire One', arial, serif;
	font-size:42px;
	font-weight:bold;
	text-transform:uppercase;
	position:absolute;
	padding:10px;
	width:180px;
	top:140px;
	text-shadow: 0px 1px 1px black;
}
.sti-menu li a h3{
	font-family: Baskerville, "Hoefler Text", Garamond, "Times New Roman", serif;
	font-size:18px;
	font-style:italic;
	color: #111;
	position:absolute;
	top:248px;
	width:180px;
	padding:10px;
}

Элементы иконок будут иметь один общий класс и специфический для конкретной иконки класс, в котором определяется фоновое изображение для иконки. Изображения иконок имеют две версии - цветную и черную. Положение фона будет изменяться в JavaScript.

.sti-icon{
	width:100px;
	height:100px;
	position:absolute;
	background-position:top left;
	background-repeat:no-repeat;
	background-color:transparent;
	left:50px;
	top:30px;
}
.sti-icon-care{
	background-image:url(../images/care.png);
}
.sti-icon-alternative{
	background-image:url(../images/alternative.png);
}
.sti-icon-family{
	background-image:url(../images/family.png);
}
.sti-icon-info{
	background-image:url(../images/info.png);
}
.sti-icon-technology{
	background-image:url(../images/technology.png);
}

 

JavaScript

Так как наш код реализован в виде плагина, зададим значения опций по умолчанию:

var settings = {
	// Конфигурация для события mouseenter
	animMouseenter		: {
		'mText' : {speed : 350, easing : 'easeOutExpo', delay : 140, dir : 1},
		'sText' : {speed : 350, easing : 'easeOutExpo', delay : 0, dir : 1},
		'icon'  : {speed : 350, easing : 'easeOutExpo', delay : 280, dir : 1}
	},
	// Конфигурация для события mouseleave
	animMouseleave		: {
		'mText' : {speed : 300, easing : 'easeInExpo', delay : 140, dir : 1},
		'sText' : {speed : 300, easing : 'easeInExpo', delay : 280, dir : 1},
		'icon'  : {speed : 300, easing : 'easeInExpo', delay : 0, dir : 1}
	},
	// Скорость анимации
	boxAnimSpeed		: 300,
	// Цвет текста по умолчанию (такая же величина определена в css)
	defaultTextColor	: '#000',
	// Цвет фона по умолчанию (такая же величина определена в css)
	defaultBgColor		: '#fff'
};

Для каждого элемента определяются скорость анимации, эффект перехода, время задержки и направление движения (1-вниз и -1 - вверх). Мы также устанавливаем скорость анимации для смены цвета фона пункта меню и текста, а также цвета для текста и фона, которые также определяются в CSS.

return this.each(function() {
	
	// Если опции заданы, объединяем их с установками по умолчанию
	if ( options ) {
		$.extend( settings, options );
	}
	
	var $el 			= $(this),
		// пункты меню
		$menuItems		= $el.children('li'),
		// Сохраняем максимальные задержки для параметров анимации mouseleave
	maxdelay	= Math.max( settings.animMouseleave['mText'].speed + settings.animMouseleave['mText'].delay ,
							settings.animMouseleave['sText'].speed + settings.animMouseleave['sText'].delay ,
							settings.animMouseleave['icon'].speed + settings.animMouseleave['icon'].delay
						  ),
		// Таймаут для события mouseenter.
		// Дает нам возможность быстро перемещать указатель мыши по пунктам
		// без генерации события
		t_mouseenter;
	
	// Сохраняем значения по умолчанию для перемещающихся элементов:
	// элементы, которые перемещаются в каждом пункте меню
	$menuItems.find('.sti-item').each(function() {
		var $el	= $(this);
		$el.data('deftop', $el.position().top);
	});
	
	// ************** События *************
	...	
});

Определим обработчик события mouseenter для каждого пункта меню:

	// Событие mouseenter для каждого пункта меню
	$menuItems.bind('mouseenter', function(e) {
		
		clearTimeout(t_mouseenter);
		
		var $item		= $(this),
			$wrapper	= $item.children('a'),
			wrapper_h	= $wrapper.height(),
			// Элементы, которые анимируются в данном пункте меню
			$movingItems= $wrapper.find('.sti-item'),
			// Цвет, который будет иметь текст при наведении курсора мыши
			hovercolor	= $item.data('hovercolor');
		
		t_mouseenter	= setTimeout(function() {
			// Индикация элемента в состоянии наведения курсора мыши
			$item.addClass('sti-current');
			
			$movingItems.each(function(i) {
				var $item			= $(this),
					item_sti_type	= $item.data('type'),
					speed			= settings.animMouseenter[item_sti_type].speed,
					easing			= settings.animMouseenter[item_sti_type].easing,
					delay			= settings.animMouseenter[item_sti_type].delay,
					dir				= settings.animMouseenter[item_sti_type].dir,
					// Если dir = 1 - пункт перемещается вниз,
					// если -1 - вверх
					style			= {'top' : -dir * wrapper_h + 'px'};
				
				if( item_sti_type === 'icon' ) {
					// Устанавливаем другой фон для иконки
					style.backgroundPosition	= 'bottom left';
				} else {
					style.color					= hovercolor;
				}
				// Скрываем  иконку, смещаем ее вверх или вниз, а затем показываем
				$item.hide().css(style).show();
				clearTimeout($item.data('time_anim'));
				$item.data('time_anim',
					setTimeout(function() {
						// Теперь анимируем каждый пункт
						// с задержкой, указанной в опциях
						$item.stop(true)
							 .animate({top : $item.data('deftop') + 'px'}, speed, easing);
					}, delay)
				);
			});
			// Анимируем фоновый цвет пункта
			$wrapper.stop(true).animate({
				backgroundColor: settings.defaultTextColor
			}, settings.boxAnimSpeed );
		
		}, 100);	
		})

И обработчик события mouseleave, в котором всё возвращается обратно:

	// Событие mouseleave для каждого пункта
	.bind('mouseleave', function(e) {
		
		clearTimeout(t_mouseenter);
		
		var $item		= $(this),
			$wrapper	= $item.children('a'),
			wrapper_h	= $wrapper.height(),
			$movingItems= $wrapper.find('.sti-item');
		
		if(!$item.hasClass('sti-current')) 
			return false;		
		
		$item.removeClass('sti-current');
		
		$movingItems.each(function(i) {
			var $item			= $(this),
				item_sti_type	= $item.data('type'),
				speed			= settings.animMouseleave[item_sti_type].speed,
				easing			= settings.animMouseleave[item_sti_type].easing,
				delay			= settings.animMouseleave[item_sti_type].delay,
				dir				= settings.animMouseleave[item_sti_type].dir;
			
			clearTimeout($item.data('time_anim'));
			
			setTimeout(function() {
				
				$item.stop(true).animate({'top' : -dir * wrapper_h + 'px'}, speed, easing, function() {
					
					if( delay + speed === maxdelay ) {
						
						$wrapper.stop(true).animate({
							backgroundColor: settings.defaultBgColor
						}, settings.boxAnimSpeed );
						
						$movingItems.each(function(i) {
							var $el				= $(this),
								style			= {'top' : $el.data('deftop') + 'px'};
							
							if( $el.data('type') === 'icon' ) {
								style.backgroundPosition	= 'top left';
							} else {
								style.color					= settings.defaultTextColor;
							}
							
							$el.hide().css(style).show();
						});
						
					}
				});
			}, delay);
		});
	});

Осталось только применить сделанный плагин для нашего кода HTML:

$(function() {
	$('#sti-menu').iconmenu({
		animMouseenter	: {
			'mText' : {speed : 500, easing : 'easeOutExpo', delay : 200, dir : -1},
			'sText' : {speed : 500, easing : 'easeOutExpo', delay : 200, dir : -1},
			'icon'  : {speed : 700, easing : 'easeOutBounce', delay : 0, dir : 1}
		},
		animMouseleave	: {
			'mText' : {speed : 400, easing : 'easeInExpo', delay : 0, dir : -1},
			'sText' : {speed : 400, easing : 'easeInExpo', delay : 0, dir : 1},
			'icon'  : {speed : 400, easing : 'easeInExpo', delay : 0, dir : -1}
		}
	});
});

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

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

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



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

Анимированное меню с выскальзывающим текстом и иконкой | | 2012-06-19 12:04:11 | | Статьи Web-мастеру | | В данном уроке мы сделаем меню с эффектом выскальзывания при наведении курсора мыши на пункт. Идея заключается в том, что элементы выскальзывают из поля зрения, изменяют цвет и возвращаются обратно | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: