Здесь мы сделаем отличный эффект для сайта. Оживим мир ссылок. Сделаем так, чтобы символы менялись один за другим при наведении курсора мыши на ссылку. Можно использовать тоже слово, а можно заменить новыми символами. В демонстрационном примере используется меню, которое состоит из таких ссылок:
1
<div class="sl_examples">
2 <a href="#" id="example1" data-hover="Фантазия">Иллюстрации</a>
3 <a href="#" id="example4">Коллекции</a>
4 </div>
Используется атрибут data-hover для индикации слова, которое должно появиться при наведении курсора мыши. Если его нет, то будет изменяться тоже самое слово, которое используется в ссылке. Для воспроизведения эффекта используются следующие стили:
01
.sl_examples{
02 float:left;
03 font-family: 'EB Garamond', arial, serif;
04 font-size:50px;
05 line-height:50px;
06 color:#f0f0f0;
07 margin-right:5px;
08 text-transform:uppercase;
09 }
10 .sl_examples a{
11 display:block;
12 position:relative;
13 float:left;
14 clear:both;
15 color:#fff;
16 }
17 .sl_examples a > span{
18 height:50px;
19 float:left;
20 position:relative;
21 overflow:hidden;
22 }
23 .sl_examples a span span{
24 position:absolute;
25 display:block;
26 left:0px;
27 top:0px;
28 text-align:center;
29 }
30 .sl_examples a span span.sl-w1{
31 color:#fff;
32 text-shadow:0px 0px 1px #fff;
33 z-index:2;
34 }
35 .sl_examples a span span.sl-w2{
36 color:#e82760;
37 text-shadow:-1px 1px 2px #9f0633;
38 z-index:3;
39 }
Класс “sl-w1? - для символов первого слова, а “sl-w2? - для символов второго слова. Нужно также вызывать плагин:
1
$(window).load(function(){
2 $('#example1').hoverwords({ delay:50 });
3 });
Используются следующие установки для плагина (их можно поменять, передав новые значения при вызове):
1
delay       : false, // каждый символ использует различное время анимации
2 speed       : 300, // скорость анимации
3 easing      : 'jswing', // эффект анимации
4 dir         : 'leftright', // направление выскальзывания символа: leftright - слева направо || rightleft - справа налево,
5 overlay     : false, // выскальзывающее слово появляется поверх текущего
6
opacity     : true // анимация прозрачности символов
А полный код плагина выглядит следующим образом:
001
/*
002 Плагин hoverwords
003 */
004 (function($) {
005
006 var aux     = {
007 toggleChars : function($el, settings) {
008 var $wrappers   = $el.find('.sl-wrapper'),
009 total       = $wrappers.length,
010 c1          = $el.hasClass('sl-w1') ? 'sl-w2' : 'sl-w1',
011 c2          = $el.hasClass('sl-w1') ? 'sl-w1' : 'sl-w2';
012
013 $el.addClass(c1).removeClass(c2);
014
015 $wrappers.each(function(i) {
016 var $wrapper            = $(this),
017 interval;
018
019 switch(settings.dir) {
020 case 'leftright' : interval = i * settings.delay; break;
021 case 'rightleft' : interval = (total - 1 - i) * settings.delay; break;
022 };
023
024 if(settings.delay) {
025 setTimeout(function() {
026 aux.switchChar($wrapper, $el, settings, c1, c2);
027 }, interval);
028 }
029 else
030 aux.switchChar($wrapper, $el, settings, c1, c2);
031 });
032 },
033 switchChar  : function($wrapper, $el, settings, c1, c2) {
034 var $newChar            = $wrapper.find('span.' + c1),
035 $currentChar        = $wrapper.find('span.' + c2),
036 nextWrapperW        = $currentChar.width();
037
038 if($newChar.length)
039 nextWrapperW        = $newChar.width();
040
041 //Новый символ добавляется
042 if($newChar.length) {
043 var param   = {left : '0px'};
044 if(!$.browser.msie && settings.opacity)
045 param.opacity   = 1;
046
047 $newChar.stop().animate(param, settings.speed, settings.easing);
048
049 //анимация для ширины контейнера
050 $wrapper.stop().animate({
051 width   : nextWrapperW + 'px'
052 }, settings.speed);
053 }
054
055 //Текущий символ убирается
056 if(!settings.overlay || c1 === 'sl-w1') {
057 if(settings.dir === 'leftright')
058 var param   = {left : -$currentChar.width() + 'px'};
059 else
060 var param   = {left : nextWrapperW + 'px'};
061
062 if(!$.browser.msie && settings.opacity)
063 param.opacity   = 0;
064 $currentChar.stop().animate(param, settings.speed, settings.easing);
065 }
066 }
067 },
068 methods = {
069 init    : function(options) {
070
071 if(this.length){
072
073 var settings = {
074 delay       : false, // каждый символ использует различное время анимации
075 speed       : 300, // скорость анимации
076 easing      : 'jswing', // эффект анимации
077 dir         : 'leftright', // направление выскальзывания символа: leftright - слева направо || rightleft - справа налево,
078 overlay     : false, // выскальзывающее слово появляется поверх текущего
079 opacity     : true // анимация прозрачности символов
080 };
081
082 return this.each(function(){
083
084 // Объединение заданных опций со значениями по умолчанию
085 if ( options ) {
086 $.extend( settings, options );
087 }
088
089 var $el             = $(this).addClass('sl-w1'),
090 word            = $el.data('hover') || $el.html(); // Если атрибут data-hover установлен, используем заданное слово, иначе используем текущее слово
091
092 if($el.data('hover')) settings.overlay = false; // Опция используется только для случая одного и того же слова
093
094 $el.lettering(); // используем плагин lettering.js
095
096 var $chars          = $el.children('span').addClass('sl-w1'),
097 $tmp            = $('<span>' + word + '</span>').lettering();
098
099 $chars.each(function(i) {
100 var $char       = $(this);
101
102 $char.wrap( $('<span/>').addClass('sl-wrapper') ) // Устнавливаем контейнер с классом для каждого символа и ширину контейнера равной ширине символа
103 .parent().css({
104 width : $char.width() + 'px'
105 });
106 });
107
108 $tmp.children('span').each(function(i) {
109 var $char       = $(this),
110 $wrapper    = $el.children('.sl-wrapper').eq(i);
111
112 if($wrapper.length) // Проверяем наличие контейнера для вставки символа
113 $wrapper.prepend( $char.addClass('sl-w2') );
114 else { // Если его нет, создаем
115 $el.append(
116 $('<span></span>').prepend( $char.addClass('sl-w2') )
117 );
118
119 $char.parent().css({
120 width : $char.width() + 'px'
121 });
122 }
123
124 if(!$.browser.msie && settings.opacity)
125 $char.css('opacity', 0);
126
127 // "скрываем" символ
128 if(settings.dir === 'leftright')
129 $char.css('left', - $char.width() + 'px');
130 else
131 $char.css('left', $char.parent().width() + 'px');
132 });
133
134 // События mouseenter / mouseleave - переключаемся на другое слово
135 $el.bind('mouseenter.hoverwords mouseleave.hoverwords', function(e) {
136 aux.toggleChars($el, settings);
137 });
138
139 });
140 }
141 }
142 };
143
144 $.fn.hoverwords = function(method) {
145 if ( methods[method] ) {
146 return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
147 } else if ( typeof method === 'object' || ! method ) {
148 return methods.init.apply( this, arguments );
149 } else {
150 $.error( 'Метод ' +  method + ' не существеут в плагине jQuery.hoverwords' );
151 }
152 };
153 })(jQuery);