—»     —»   Навигация в стиле игрового автомата Slot Machine на jQuery
  Раздел: Меню и Навигация   Нет комментариев  

Навигация в стиле игрового автомата Slot Machine на jQuery



Меню навигации относится к тем вещам, которые можно встретить на каждом веб-сайте. Нам хотелось придать чего-то оригинального этому элементу, и однажды за просмотром фильма, в котором присутствовали игровые автоматы, одного из наших дизайнеров осенило. Используя jQuery и некоторые основные элементы CSS и HTML, можно превратить скучное меню навигации в интересный привлекательный элемент. Итак, сегодня мы займемся разработкой нового оформления меню навигации, которое вы в дальнейшем сможете использовать для своих проектов.

Навигация в стиле игрового автомата Slot Machine на jQuery

Так как здесь не требуется каких-либо продвинутых знаний, этот элемент можно отнести к числу быстрых трюков с jQuery. Посмотрите демо-файл или скачайте исходный код, чтобы понять то, что мы будем сегодня разрабатывать.

ДЕМО | СКАЧАТЬ

Уже удивлены работой? Перед вами статья, в которой описан процесс создания. Конечно, данную технику можно использовать в качестве кнопок перехода на социальные медиа-ресурсы (взамен основному навигационному меню вашего сайта).

HTML

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

<ul id="jquerynav" class="navigation">
   <li><a href="#" class="marcofolio">Marcofolio.net</a></li>
   <li><a href="#" class="rss">RSS</a></li>
   <li><a href="#" class="twitter">Twitter</a></li>
   <li><a href="#" class="jquery">jQuery</a></li>
</ul>

Учитывайте различные атрибуты id и классов, которые мы будем использовать. У каждой ссылки отдельный класс, так как нам придется редактировать их посредством CSS.

Это и есть весь код HTML, который нам потребуется для правильной работы примера. Далее прибавляем стили.

CSS

Хотя CSS не особо привлекателен, здесь есть кое-что ключевое, за счет чего данная техника заработает. Давайте посмотрим на первую часть.

.navigation { list-style:none; width:800px; height:75px; }
.navigation li { display:inline; text-indent:-9999px; }
.navigation li a { display:block; float:left; width:200px; height:75px;
   background-image:url("../images/buttons.png"); }

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

Так как мы не пользуемся параметрами background-repeat или background-position, изображение buttons.png будет расположено по координатам 0, 0 (левый верхний угол), и будет постоянно повторяться. Для реализации данного примера мы воспользуемся спрайтами.

Навигация в стиле игрового автомата Slot Machine на jQuery

Теперь вы увидите, почему всем ссылкам нужны были разные классы. Для отображения правильной кнопки, нам нужно будет задавать параметр позиции фонового изображения (background-position).

.navigation li a.marcofolio { background-position:0 0; }
.navigation li a.rss { background-position:-200px 0;  }
.navigation li a.twitter { background-position:-400px 0; }
.navigation li a.jquery { background-position:-600px 0; }

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

jQuery

Для начала нам понадобится плагин Background-Position Animations, так как нам надо анимировать фоновое изображение (по стандарту, jQuery не имеет данной функции). Мы также воспользуемся плагином jQuery Easing для использования собственных анимаций. Ну и, конечно, нам понадобится сам jQuery.

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

$("#jquerynav li a").each(function(){
   // Returns "##px" and "##px"
   var backgroundPositions = $(this).css('background-position').split(" ");
  
   // Retrieve the original X position
   $(this).data("originalXpos", backgroundPositions[0].slice(0, -2));
  
   // Set the new Y position to 0
   $(this).data("newYpos", 0);
});

Теперь, после того, как у нас это все готово, мы можем заняться разработкой непосредственно самой функции – события hover().

$("#jquerynav li a").hover(function(){
      $(this)
         .data("newYpos", $(this).data("newYpos") + 1)
         .stop()
         .animate({
            backgroundPosition: $(this).data("originalXpos") +
               "px " + $(this).data("newYpos") * 75 + "px"
         }, 600, "easeOutCirc");
   }, function(){
      $(this)
         .data("newYpos", $(this).data("newYpos") + 1)
         .stop()
         .animate({
            backgroundPosition: $(this).data("originalXpos") +
               "px " + $(this).data("newYpos") * 75 + "px"
         }, 400, "easeInCirc");
   });

Здесь нужно немного поработать. Новое значение расположения элемента на оси Y нужно увеличить. Сделав это (и используя его в дальнейшем для функции анимации), мы можем быть уверены, что кнопка будет скользить только вниз, что придаст схожести с игровым автоматом. Так как фоновое изображение повторяется, мы каждый раз видим копию одного и того же изображения. Мы воспользуемся исходным значением расположения элемента на оси Х для достижения того же эффекта, чтобы игровой автомат работал симметрично.

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

На этом все! Это и есть весь код, который потребуется вам для создания данного примера.

В заключение

Может быть, этот "игровой автомат" выглядит немного странно, но он придает сайту некоторую изюминку. В данном примере сам дизайн не ахти, поэтому кто-то из профессиональных дизайнеров может выполнить более привлекательную реализацию. К тому же, это всего лишь еще один пример, реализованный посредством нескольких строк кода. Конечно же, вы можете продлить эффект анимации (чтобы добиться более реалистичного эффекта), но это может надоесть посетителям.

ДЕМО | СКАЧАТЬ

Файл для скачивания также включает в себя PSD-файлы для кнопок.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery
Опубликовал Mysterious Master   Прочитано (раз): 7304   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930