jQuery Меню с анимированным текстом и иконками

Эту статью я перевела с сайта http://tympanus.net и выложила, как есть без внесения каких-либо изменений.
Если она покажется Вам интересной, и Вы захотите внедрить ее к себе на сайт, будь то Joomla, WordPress или Ucoz. Пишите в комментариях, и я постараюсь выполнить Ваше желание. Либо пишите в личку, и я сделаю это меню индивидуально для Вас за отдельную плату.

jQuery Меню с анимированным текстом и иконками 

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

Пример такого меню можно посмотреть здесь.

Изображения были взяты с сайта The Noun Project

Итак, поехали!

Html- разметка

html-код меню должен выглядеть следующим образом:
Code
<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>

Соответственно пунктов от li до /li может быть столько, сколько Вам нужно.
data-hovercolor — будет использоваться для того, чтобы изменить цвет текста при наведении. Так же мы воспользуемся атрибутом data-type , который позже нам понадобиться в Java- скрипте.

Теперь давайте зададим стили.

Стили CSS

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

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

Элементы списка должны быть расположены друг за другом, а не под друг другом (свойство float) и располагаться с небольшим отступом
Code
.sti-menu li{
  float:left;
  width:200px;
  height:300px;
  margin:1px;
}

Теперь зададим стили ссылок. Мы спрячем их с помощью overflow, чтобы позднее их анимировать.
Code
.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;
}

Заголовки поставим в позицию absolute, задами ширину, и отступ сверху.

Code
.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;
}

Для каждого пункта меню задаем индивидуальную картинку. Все картинки заданы в двух цветах — черно-белая и цветная версии, расположенные друг под другом. Изменять позицию фона мы будем в Java-скрипте при наведении на пункт. (Про спрайты я уже писала)

Code
.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);
}

Со стилями все. Теперь самое интересное — Java-скрипт

Java — скрипт

Прежде , чем запускать наш плагин, зададим настройки по умолчанию

Code
var settings = {
  // Конфигурация при наведении курсора мыши
  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}
  },
  // Конфигурация при убирании курсора мыши
  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’
};

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

Code
return this.each(function() {
  //Если настройки заданы, используем их, иначе настройки по умолчанию
  if ( options ) {
  $.extend( settings, options );
  }

  var $el = $(this),
  // the menu items
  $menuItems = $el.children(‘li’),
  // запоминаем макс. временную задержку для анимации
  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
  ),
  // задержка при наведении курсора
  // позволит нам быстро двигать мышь по пунктам,
  // без срабатывания события «наведение курсора на пункт меню»
  t_mouseenter;

  // Сохраним, заданные по умолчанию настройки свойства top для двигающихся элементов:
  //элементов, которые изменяются внутри пунктов меню
  $menuItems.find(‘.sti-item’).each(function() {
  var $el = $(this);
  $el.data(‘deftop’, $el.position().top);
  });

  // События
  …

});

Теперь давайте определим событие «наведение курсора на пункт меню»

Code
$menuItems.bind(‘mouseenter’, function(e) {

  clearTimeout(t_mouseenter);

  var $item = $(this),
  $wrapper = $item.children(‘a’),
  wrapper_h = $wrapper.height(),
  //элементы, которые изменяются внутри пунктов меню
  $movingItems= $wrapper.find(‘.sti-item’),
  // the color that the texts will have on hover
  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,
  //если направление задано 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);  

})

И теперь определим событие «покидание курсором мыши пункта меню» . Возвращаем все на свои позиции:

Code
// определим событие «покидание курсором мыши пункта меню»
.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);
  });
});

Вот и все. Надеюсь, будет Вам полезно!

Скачать

Комментарии на Facebook