406 Навигация является той вещью, которую вы видите почти на каждом сайте каждый день. Чтобы развеять скуку, было решено создать что-то необычное.
Так родилась идея меню, стилизованного под анимацию слот-машины.
Используя только jQuery, немного CSS и HTML, мы сможем создать что-то подобное.
Вы потрясены и не знаете, как это все работает? Давайте разбираться...
HTML
Как всегда, оставляем HTML чистым и понятным. Мы будем использовать неупорядоченный список, который будет содержать ссылки. CSS разметка будет чуть позже.
|
1 2 3 4 5 6 |
<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> |
Вот и весь HTML, что был нам нужен.
CSS
Хотя CSS код не такой впечатляющий, как HTML, но мы постараемся показать вам основные принципы и технику работы, что может помочь в ваших собственных разработках. Далее, первая часть.
|
1 2 3 4 |
.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-image.
Мы устанавливаем свойства background-repeat или background-position, потому что, по умолчанию, изображение устанавливается в координаты 0, 0 (верх лево) и повторяется по всем направлениям. Мы будем использовать технику спрайтов.
Теперь вы понимаете, почему ссылки названы разными классами. Нам нужно установить свойство background-position, чтобы отобразить нужную кнопку.
|
1 2 3 4 |
.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; } |
Теперь у нас есть основа, чтобы запустить слот-машину. Все ссылки на месте и background-position корректен.
Теперь немного магии на jQuery.
jQuery
Во-первых, нам потребуются следующие плагины:
- Background-Position Animations плагин
- jQuery Easing плагин
- ядро jQuery
Теперь заставим все это вместе работать.
Перед написанием функции hover(), нам нужно выполнить несколько приготовлений. Нужно запомнить позиции X и Y по умолчанию, чтобы потом вернуть анимацию в исходное состояние.
|
1 2 3 4 5 6 7 8 9 10 |
$("#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().
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$("#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"); }); |
Давайте теперь разберем ход работы. Значение newYpos увеличиваем на единицу, чтобы потом применить ее в формуле отображения фонового изображения. Конечно же используем функцию animate(), чтобы получить эффект слот-машины. Потому как фоновое изображение повторяется, мы можем показывать копию изображения снова и снова. И в конце, используем originalXpos, чтобы вернуть изображение обратно в исходное состояние.
Событие onMouseOver (первая функция) работает быстрее, чем onMouseOut (вторая функция), но вы можете изменить значения времени, как вам удобнее. Также работает эффект ослабления, который управляется через easeInCirc и easeOutCirc (оба из плагина easing).
Вот и все!
