Навигация в стиле слот-машины на jQuery

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

Так родилась идея меню, стилизованного под анимацию слот-машины.

Используя только jQuery, немного CSS и HTML, мы сможем создать что-то подобное.

ПримерСкачать

Вы потрясены и не знаете, как это все работает? Давайте разбираться...

HTML

Как всегда, оставляем HTML чистым и понятным. Мы будем использовать неупорядоченный список, который будет содержать ссылки. CSS разметка будет чуть позже.

Вот и весь HTML, что был нам нужен.

CSS

Хотя CSS код не такой впечатляющий, как HTML, но мы постараемся показать вам основные принципы и технику работы, что может помочь в ваших собственных разработках. Далее, первая часть.

Устанавливаем ссылкам фиксированную ширину и высоту и, очень важный момент, обязательно background-image.

Мы устанавливаем свойства background-repeat или background-position, потому что, по умолчанию, изображение устанавливается в координаты 0, 0 (верх лево) и повторяется по всем направлениям. Мы будем использовать технику спрайтов.

Теперь вы понимаете, почему ссылки названы разными классами. Нам нужно установить свойство background-position, чтобы отобразить нужную кнопку.

Теперь у нас есть основа, чтобы запустить слот-машину. Все ссылки на месте и background-position корректен.
Теперь немного магии на jQuery.

jQuery

Во-первых, нам потребуются следующие плагины:

  • Background-Position Animations плагин
  • jQuery Easing плагин
  • ядро jQuery

Теперь заставим все это вместе работать.

Перед написанием функции hover(), нам нужно выполнить несколько приготовлений. Нужно запомнить позиции X и Y по умолчанию, чтобы потом вернуть анимацию в исходное состояние.

Теперь все приготовления готовы и можно приступать к событиюhover().

Давайте теперь разберем ход работы. Значение newYpos увеличиваем на единицу, чтобы потом применить ее в формуле отображения фонового изображения. Конечно же используем функцию animate(), чтобы получить эффект слот-машины. Потому как фоновое изображение повторяется, мы можем показывать копию изображения снова и снова. И в конце, используем originalXpos, чтобы вернуть изображение обратно в исходное состояние.

Событие onMouseOver (первая функция) работает быстрее, чем onMouseOut (вторая функция), но вы можете изменить значения времени, как вам удобнее. Также работает эффект ослабления, который управляется через easeInCirc и easeOutCirc (оба из плагина easing).

Вот и все!


Оставить комментарий