Так как здесь не требуется каких-либо продвинутых знаний, этот элемент можно отнести к числу быстрых трюков с 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 (левый верхний угол), и будет постоянно повторяться. Для реализации данного примера мы воспользуемся спрайтами.
Теперь вы увидите, почему всем ссылкам нужны были разные классы. Для отображения правильной кнопки, нам нужно будет задавать параметр позиции фонового изображения (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-файлы для кнопок.