Наш клиент, вдохновленный Flash, ведет свой бизнес, связанный с переработкой и повторным использованием материалов, списанных разнообразными космическими корпорациями. Клиент хотел бы, чтобы панель навигации сайта была представлена в футуристическом (и, одновременно, ретро) стиле. Согласно словам самого заказчика, «панель должна обладать гладкой анимацией и включать в себя наш логотип\иконку ракеты в качестве указателя».
Давайте подготовим нашу тему к дальнейшей работе. Мы продолжим использовать нашу стандартную тему с CSS изменениями, которые были сделаны нами во второй главе. Мы улучшим нашу анимацию путем добавления сглаженного отступа, и добавим новые эффекты наведения мыши на пункты меню.
Для начала нам понадобится захватить контур космического корабля с логотипа компании. Этот контур будет использоваться нами в качестве указателя для меню. Сделать это можно с помощью InkScape:
Теперь выполним поворот ракеты, добавим к ней тень и afterburn блеск, чтобы придать ей некоторую живость:
Сохраним изображение в формате .png с прозрачностью. Его ширина будет составлять 37 пикселей. Далее, нам понадобится подготовить таблицу стилей нашей темы к подключению созданного фонового изображения. С помощью jQuery мы создадим div с идентификатором #shipSlide, поэтому необходимо заранее определить для него необходимые стили:
...
#shipSlide{
position: absolute; margin-top: 12px; margin-left: -7px;
width: 37px; height: 20px;
background: url(images/spaceship-icon.png) no-repeat;
}
... Теперь мы можем приступить к работе с jQuery. Для начала нам нужно удостовериться, что jQuery подключен к теме, и что файл custom-jquery.js готов к работе. Это обязательное условие для выполнения всех наших проектов, связанных с jQuery, поэтому мы не будем снова заострять на данной процедуре внимание. Помимо всего прочего, нам понадобятся плагины Color и Easing. Поскольку Color поставляется вместе с WordPress, зарегистрировать его не представляет никакого труда. Плагин Easing придется загружать и подключать к теме вручную. Скачать Easing можно с сайта http://gsgd.co.uk/sandbox/jquery/easing/.
Применим к навигации небольшие усовершенствования с помощью jQuery:
...
//добавляем #shipSlide div
//сразу после div с классом .menu-header
jQuery('.menu-header').prepend('<div id="shipSlide"> </div>');
//снижаем прозрачность #shipSlide div до 40%
jQuery('#shipSlide').fadeTo('slow', 0.4);
...Проверим результат нашей работы:
Отлично, теперь установим основную анимацию, которая будет сдвигать объекты вправо li.page_item на 35 пикселей от их первоначального значения отступа. Мы будем использовать функцию .hover() для того, чтобы создать необходимый эффект наведения курсора мыши на объекты li.page_item:
...
jQuery('li.menu-item')
.hover(function() {
//сдвигаем каждый пункт меню вправо
jQuery(this).animate({paddingLeft: '+=25px'}, 400, 'swing');
//переопределяем фоновый цвет при наведении курсора мыши
jQuery(this).find('a').css('background','none');
//описываем вдижение ракеты
}, function(){
//возвращаем пункт меню в его первоначальное положение
jQuery(this).animate({paddingLeft: '-=25px'}, 400, 'swing');
});//end hover
...
Наконец, внутри первой функции hover, над цветовой анимацией объекта, мы добавим следующий фрагмент кода, который будет выполнять перемещение объекта #shipSlide к позиции li.item_page:
...
//задаем произвольное перемещение ракеты
var p = jQuery(this);
var position = p.position();
jQuery("#shipSlide").fadeTo('slow', 1)
.animate({marginLeft: position.left-175},
{duration: 600, easing: 'easeOutBack', queue: false});
...Мы установили переменную position и использовали функцию .position(), чтобы получить массив с информацией от объектов li.page_item.
Функция анимации объекта #shipSlide изменяет значение отступа marginLeft изображения на число position.left-175. Также в предыдущем фрагменте кода мы устанавливаем параметр queue в false и используем метод динамики easeOutBack, который становится доступным благодаря подключению плагина Easing.
Последний штрих: нам осталось выполнить перемещение ракеты на начальную позицию. Поместим следующий jQuery код над всем остальным кодом навигации:
...
jQuery('.menu-header').hover(function(){
jQuery("#shipSlide").fadeIn(1000);
}, function(){
jQuery("#shipSlide").fadeTo('slow', .4)
.animate({marginLeft: '-5px'},
{duration: 600, easing: 'easeOutBack', queue: false});
});//end hover
... Финальный результат выглядит бесподобно:
