Выскальзывающие символы с использованием jQuery

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

В уроке используется плагин jQuery  Lettering.js.

В демонстрационном примере используется меню, которое состоит из таких ссылок:

<div class="sl_examples">
	<a href="#" id="example1" data-hover="Фантазия">Иллюстрации</a>
	<a href="#" id="example4">Коллекции</a>
</div>

Используется атрибут data-hover для индикации слова, которое должно появиться при наведении курсора мыши. Если его нет, то будет изменяться тоже самое слово, которое используется в ссылке.

Для воспроизведения эффекта используются следующие стили:

.sl_examples{
	float:left;
	font-family: 'EB Garamond', arial, serif;
	font-size:50px;
	line-height:50px;
	color:#f0f0f0;
	margin-right:5px;
	text-transform:uppercase;
}
.sl_examples a{
	display:block;
	position:relative;
	float:left;
	clear:both;
	color:#fff;
}
.sl_examples a > span{
	height:50px;
	float:left;
	position:relative;
	overflow:hidden;
}
.sl_examples a span span{
	position:absolute;
	display:block;
	left:0px;
	top:0px;
	text-align:center;
}
.sl_examples a span span.sl-w1{
	color:#fff;
	text-shadow:0px 0px 1px #fff;
	z-index:2;
}
.sl_examples a span span.sl-w2{
	color:#e82760;
	text-shadow:-1px 1px 2px #9f0633;
	z-index:3;
}

Класс “sl-w1″ - для символов первого слова, а “sl-w2″ - для символов второго слова.

Нужно также вызывать плагин:

$(window).load(function(){
	$('#example1').hoverwords({ delay:50 });
});


Используются следующие установки для плагина (их можно поменять, передав новые значения при вызове):

delay		: false,		// каждый символ использует различное время анимации
speed		: 300,			// скорость анимации
easing		: 'jswing',		// эффект анимации
dir			: 'leftright', 	// направление выскальзывания символа: leftright - слева направо || rightleft - справа налево, 
overlay		: false,		// выскальзывающее слово появляется поверх текущего
opacity		: true			// анимация прозрачности символов

А полный код плагина выглядит следующим образом:

/*
Плагин hoverwords
*/
(function($) {
	
	var aux		= {
			toggleChars	: function($el, settings) {
				var $wrappers	= $el.find('.sl-wrapper'),
					total		= $wrappers.length,
					c1			= $el.hasClass('sl-w1') ? 'sl-w2' : 'sl-w1',
					c2			= $el.hasClass('sl-w1') ? 'sl-w1' : 'sl-w2';		
				
				$el.addClass(c1).removeClass(c2);
				
				$wrappers.each(function(i) {
					var $wrapper 			= $(this),
						interval;
					
					switch(settings.dir) {
						case 'leftright' : interval = i * settings.delay; break;
						case 'rightleft' : interval = (total - 1 - i) * settings.delay; break;
					};
					
					if(settings.delay) {
						setTimeout(function() {
							aux.switchChar($wrapper, $el, settings, c1, c2);
						}, interval);
					}	
					else
						aux.switchChar($wrapper, $el, settings, c1, c2);
				});
			},
			switchChar	: function($wrapper, $el, settings, c1, c2) {
				var $newChar			= $wrapper.find('span.' + c1),
					$currentChar		= $wrapper.find('span.' + c2),
					nextWrapperW		= $currentChar.width();
					
				if($newChar.length)
					nextWrapperW		= $newChar.width();
				
				//Новый символ добавляется
				if($newChar.length)	{
					var param	= {left	: '0px'};
					if(!$.browser.msie && settings.opacity)
						param.opacity 	= 1;
					
					$newChar.stop().animate(param, settings.speed, settings.easing);
					
					//анимация для ширины контейнера
					$wrapper.stop().animate({
						width	: nextWrapperW + 'px'
					}, settings.speed);
				}
				
				//Текущий символ убирается
				if(!settings.overlay || c1 === 'sl-w1') {
					if(settings.dir === 'leftright')
						var param	= {left	: -$currentChar.width() + 'px'};
					else
						var param	= {left	: nextWrapperW + 'px'};
						
					if(!$.browser.msie && settings.opacity)
						param.opacity 	= 0;
					$currentChar.stop().animate(param, settings.speed, settings.easing);
				}
			}
		},
		methods = {
			init 	: function(options) {
				
				if(this.length){
					
					var settings = {
						delay		: false,		// каждый символ использует различное время анимации
						speed		: 300,			// скорость анимации
						easing		: 'jswing',		// эффект анимации
						dir			: 'leftright', 	// направление выскальзывания символа: leftright - слева направо || rightleft - справа налево, 
						overlay		: false,		// выскальзывающее слово появляется поверх текущего
						opacity		: true			// анимация прозрачности символов
					};
					
					return this.each(function(){
						
						// Объединение заданных опций со значениями по умолчанию
						if ( options ) {
							$.extend( settings, options );
						}
						
						var $el 			= $(this).addClass('sl-w1'),
							word			= $el.data('hover') || $el.html(); 	// Если атрибут data-hover установлен, используем заданное слово, иначе используем текущее слово
						
						if($el.data('hover')) settings.overlay = false;			// Опция используется только для случая одного и того же слова
						
						$el.lettering();										// используем плагин lettering.js
							
						var	$chars			= $el.children('span').addClass('sl-w1'),
							$tmp 			= $('<span>' + word + '</span>').lettering();
						
						$chars.each(function(i) {
							var $char		= $(this);
							
							$char.wrap( $('<span/>').addClass('sl-wrapper') )	// Устнавливаем контейнер с классом для каждого символа и ширину контейнера равной ширине символа
								 .parent().css({
									width : $char.width() + 'px'
								  });
						});
						
						$tmp.children('span').each(function(i) {
							var $char		= $(this),
								$wrapper 	= $el.children('.sl-wrapper').eq(i);
							
							if($wrapper.length)									// Проверяем наличие контейнера для вставки символа
								$wrapper.prepend( $char.addClass('sl-w2') );
							else {												// Если его нет, создаем
								$el.append(
									$('<span class="sl-wrapper"></span>').prepend( $char.addClass('sl-w2') )
								);
								
								$char.parent().css({
									width : $char.width() + 'px'
								});
							}
							
							if(!$.browser.msie && settings.opacity)
									$char.css('opacity', 0);
							
																		// "скрываем" символ
							if(settings.dir === 'leftright')							
								$char.css('left', - $char.width() + 'px');
							else
								$char.css('left', $char.parent().width() + 'px');		
						});
						
						// События mouseenter / mouseleave - переключаемся на другое слово
						$el.bind('mouseenter.hoverwords mouseleave.hoverwords', function(e) {
							aux.toggleChars($el, settings);
						});

					});
				}
			}
		};
	
	$.fn.hoverwords = function(method) {
		if ( methods[method] ) {
			return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
		} else if ( typeof method === 'object' || ! method ) {
			return methods.init.apply( this, arguments );
		} else {
			$.error( 'Метод ' +  method + ' не существеут в плагине jQuery.hoverwords' );
		}
	};
})(jQuery);

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

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

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



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

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