Як побудувати навігацію «мазок» з допомогою jQuery

17

Від автора: Сьогодні ми створюємо анімовану навігацію за допомогою jQuery для веб-сайту «акварельному» стилі, де посилання «малюватися» при проведенні над ними мишею. «Акварельний» графіка створювалася в photoshop’е, а для анімації ми скористаємося популярної базою jQuery, JavaScript.


Як побудувати навігацію «мазок» з допомогою jQuery

Перед тим, як зайнятися покроковим побудовою навігації «штрихи» з допомогою jQuery внизу можна подивитися остаточну демоверсію підручника.

Як побудувати навігацію «мазок» з допомогою jQuery

Перед тим, як ми приступимо до практичних кроків, я Вам рекомендую переглянути демо-результат роботи.

Також завантажте вихідні коди собі на комп’ютер!

Графіка — Photoshop

Фонова канва – це шаблон з photoshop’у (я користуюся CS4, але впевнений, що вона доступна і в попередніх версіях), згрупований у розділі Greyscale Paper (папір сірих відтінків). Деякі кисті з використаних мною для розмальовки фону, можна знайти в Bittbox water color brush sets (набори акварельних кистей) том 1 і 2. Набори кистей ще можна знайти онлайн і сперечаюся, ви знаєте, що я хочу сказати далі; Google вам в допомогу.

У мене є підказки про створення мазків пензлем. По-перше, переконайтеся, що встановили «розбивку» (Spacing) кисті на дуже низьке значення, так ви зробите цей прийом тривалим. Повзунок розбивки Spacing знаходиться під вкладкою «обрис кінчика пензля» (Brush Tip Shape) в палітрі кистей (якщо не можете знайти, викличте її, натиснувши F5).

Як побудувати навігацію «мазок» з допомогою jQuery

У мене в прикладі шість елементів навігації, і я планую залишити між ними поле в 6 пікселів. Це означає, що на 6 елементів мені залишиться 930 пікселів. Це 960 пікселів на контейнер DIV мінус 30 пікселів на поля між пунктами (п’ять раз по 6 пікселів). Так у нас залишиться за 155 пікселів на пункт. Я, як видно на зображенні нижче, користувався білими блоками в якості кордонів для мазків, а потім дублював їх для ретельної підгонки під пункти навігації.

Як побудувати навігацію «мазок» з допомогою jQuery

Код

Внизу на зображенні можна побачити структуру папок нашого прикладу. Вона досить проста. Папка для зображень, інша для файлів сценарію, один файл HTML і CSS.

Як побудувати навігацію «мазок» з допомогою jQuery

В наступних двох розділах описуються HTML і CSS демо-сторінки.

Вміст — HTML5

Для створення своєї демо-сторінки ми будемо користуватися деякими елементами HTML5. Ось весь код повністю, а потім ми обговоримо кожну його частину.

jQuery Nav Demo

Fictive Company

  • Home
  • About Us
  • Products
  • News
  • Services
  • Contact Us

Спочатку давайте розглянемо елемент HEAD, і ви помітите, що йому передують дуже прості оголошення doctype та language.

jQuery Nav Demo

Тепер всередині тегу head у нас є кілька стандартних тегів title, тег meta, що визначає набір характеристик, посилання на нашу таблицю стилів і пара JavaScript файлів в умовних коментарях. Перший файл JS доданий для гарантії належної підтримки HTML5 в Internet explorer’і (IE).

Цей скрипт змушує IE призначати потрібні стилі елементів, яких він не дізнається (як header, nav і інші нові елементи HTML5). Другий скрипт (IE8.js додає сучасні характеристики CSS більш старими версіями Internet explorer’а.

Ми переходимо до елемента body і своєму неупорядоченному списком:

Fictive Company

  • Home
  • About Us
  • Products
  • News
  • Services
  • Contact Us

Після тега body вставляємо елемент header. На нашій сторінці є тільки заголовок, що містить логотип та навігацію, а якщо б на ній було більше контенту, той перебував би під елементом заголовка. По-перше, у нас є тег H1, що містить логотип. За ним слідує елемент nav, яка містить навігацію.

Навігація сама по собі кодується як невпорядкований список. У кожного пункту списку є свій призначений клас, так що ми легко можемо націлитися на кожен з них за допомогою jQuery. Ідея полягає в тому, щоб продемонструвати різні ефекти до кожного пункту списку. Крім того, кожен пункт обгорнутий в теги span; про це більш докладно в наступному розділі CSS.

Внизу вигляд нашої сторінки без застосування стилів:

Як побудувати навігацію «мазок» з допомогою jQuery

Вміст — CSS

Як зазвичай, я розпочинаю CSS з версії CSS Reset від Еріка Майєра (Eric Meyer). Потім додаю хак Clearfix, нову версію від Джеффа Стара (Jeff Star).

/* Clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: «»;
clear: both;
height: 0;
}
* html .clearfix { zoom: 1 } /* IE6 */
*:first-child+html .clearfix { zoom: 1 } /* IE7 */
header, nav { display: block } /* HTML5 tags */

Хек Clearfix – реально корисний метод; детальніше про нього можна прочитати на сайті Джеффа. Останній рядок наведеного вище коду додана для поліпшення підтримки HTML5, вона говорить браузерам ставитися до елементів header і nav як до елементів групового рівня.

Далі ми призначаємо стилі основних елементів розмітки.

/* L A Y O U T */
html { background: #d5bd89 url(images/bgHtml.jpg) repeat }
body { background: url(images/bgBody.png) no-repeat top center }
/* HEADER */
header {
width: 960px;
margin: 0 auto;
padding-top: 30px;
}
#logo {
background: url(images/logo.png) no-repeat;
width: 460px;
height: 66px;
text-indent: -9999px;
display: block;
margin: 0 0 25px 8px;
}

Спочатку встановлюємо фон елемента html шаблон своєї канви, повторюється по всій сторінці). Фон елемента body – це наше акварельне «твір мистецтва», встановлений по центру. Елемент header отцентрирован шляхом встановлення правого і лівого полів на auto. Так ми гарантуємо, що вміст (в даному випадку логотип і навігація) центрується по горизонталі.

Зазвичай для встановлення вмісту по центру і обмеження стандартними 960 пікселями я використовував б клас container (хоча ви можете називати його по-іншому). Але в цьому підручнику, щоб все спростити і скоротити, я призначив стилі елементу header безпосередньо.

Нарешті для логотипу ми використовуємо заміну зображення CSS. Скористаємося методом text-indent. Встановлюємо фонове зображення елемента і вставляємо текст HTML теги h1 рамки браузера, встановивши глибоко негативне значення text-indent. Так ми гарантуємо, що у створеному нами в photoshop’е зображенні побачимо тільки гарний текст.

Тепер слід остання частина таблиці стилів, де ми призначаємо стилі неупорядоченному списком навігації.

/* Navigation */
ul li {
display: inline-block;
position: relative;
float: left;
margin: 6px 0 0 20px;
}
ul li a {
background: url(images/bgNav.png) no-repeat;
text-indent: -9999px;
height: 80px;
width: 155px;
text-align: center;
display: block;
position: relative;
float: left;
}
.last { margin-right: 0 }

Починаємо зі зміщення всіх пунктів списку ліворуч і визначення полів. Далі призначаємо стиль посилання в пунктах списку. Ми визначаємо їм просте фонове зображення, тому що експортували всю графіку навігації з photoshop’у як один шар. Нам потрібно встановити посилання як елементи групового рівня, щоб можна було визначити їх точні розміри і використовувати той же метод заміни зображення CSS, що і для логотипу.

Я додав клас last до останньої посиланням (Contact Us), щоб упевнитися, що у нього немає правого поля в 6 пікселів. Ці зайві 6 пікселів зробили б рядок з 966 пікселів широкої і її довелося б обертати в наступний рядок, тому що ми встановили елемент header на ширину 960 пікселів. Як завжди, ми б скористалися псевдоклассом last-child для встановлення поля останнього елемента на нуль.

Ми написали б щось на зразок цього:

ul li:last-child { margin-right: 0 }

На жаль, деякі браузери не реєструють цей псевдоклас. Він працює в Google Chrome, Opera, Firefox і Internet Explorer 7, але IE8 і Safari обертають останній елемент в наступний рядок. Я вважаю, що doctype HTML5 викликає цю проблему. Якщо хто-небудь знає про неї більше, будь ласка, поділіться своїми знаннями в коментарях.

Ми переходимо до позиціонування фонового зображення для кожного з пунктів меню:

#nHom { background-position: 0 0 }
#nAbo { background-position: -155px 0px }
#nPro { background-position: -310px 0px }
#nNew { background-position: -465px -80px }
#nSer { background-position: -620px -80px }
#nCon { background-position: -775px 0px }

У кожного з пунктів є id, визначений в розмітці HTML, а тут ми встановлюємо своє зображення, що містить всю графіку. Перше значення визначає горизонтальну стартову позицію зображення; друге – вертикальну. По мірі руху по пунктах зрушуємо зображення вліво. Інша вертикальна позиція фону для посилань пунктів News і Services буде пояснюватися в наступному розділі, коли ми почнемо писати код jQuery.

Внизу наведено фрагмент CSS, призначає стилі елементів span, які ми анимируем за допомогою jQuery.

ul li a span {
background: url(images/bgNav.png) no-repeat;
display: none;
position: absolute;
left: 0;
top: 0;
height: 80px;
width: 155px;
}
#nHom span { background-position: 0 -80px }
#nAbo span { background-position: -155px -80px }
#nPro span { background-position: -310px -80px }
#nNew span { background-position: -465px 0px; display: block }
#nSer span { background-position: -620px 0px; display: block }
#nCon span { background-position: -775px -80px }

Ми встановили позицію елементів span на absolute, тому що нам потрібно, щоб вони з’являлися прямо зверху наших посилань. Ось чому ми встановили атрибути left і top на zero. Ми також встановили атрибут display на none, тому що ми будемо анімувати їх за допомогою jQuery. Фонове розташування елементів span відрізняється від відповідної позиції фону посилання тільки по вертикалі.

Остання частина коду CSS внизу розкриває стан проведення мишею і активний стан посилань:

/* Hover States */
.cssOnly #nHom:hover { background-position: 0 -80px; }
.cssOnly #nAbo:hover { background-position: -155px -80px; }
.cssOnly #nPro:hover { background-position: -310px -80px; }
.cssOnly #nNew span:hover { background-position: -465px -80px; }
.cssOnly #nSer span:hover { background-position: -620px -80px; }
.cssOnly #nCon:hover { background-position: -775px -80px; }
/* Active State */
.active #nHom { background-position: 0 -160px; }

Клас cssOnly, який ми додали до всіх елементів li, гарантує зміна фону при проведенні мишею над посиланням, навіть якщо JavaScript в браузері вимкнено.

Ось остаточний вигляд нашої сторінки:

Як побудувати навігацію «мазок» з допомогою jQuery

Код — jQuery

Ми підійшли до основної частини свого підручника. Ви, можливо, знайомі з технікою, яка піднімалася в розділах про HTML і CSS, але, сподіваюся, ця частина буде для вас новою. В кінці свого файлу index.html ми викликаємо файл сценарію myScripts.js, розташований в папці зі сценаріями. Перше, що ми зробимо, це видалимо клас cssOnly з усіх елементів списку.

// If JS is disabled, CSS menu will still work
$(function() {
$(«li»).removeClass(«cssOnly»);
});

Так видаляється ефект проведення мишею hover, встановлений в CSS, так що ми побачимо тільки ефекти, анімовані jQuery.

Перший ефект буде анімувати мазок пензлем зліва направо. Всі елементи з класом fromLeft будуть анімовані таким кодом:

//From the left
$(function() {
$(«.fromLeft a»).hover(
function(){
$(this).find(«span»).stop(true, true).animate({ width: ‘show’ }, 1000);
},
function(){
$(this).find(«span»).fadeOut(800);
});
})

Перше, що ми тут робимо – знаходимо теги-прив’язки, розташовані всередині елементів з класом fromLeft. При проведенні над ними мишею функція починає виконуватися:

$(this).find(«span»).stop(true, true).animate({ width: ‘show’ }, 1000);

Функція знаходить елемент span, який є дочірнім елементом посилання, над якою проводять мишею, і анімує його. Перед початком анімації stop говорить браузеру зупинити іншу анімацію, яка може виявитися на черзі.

У функції animate тут два аргументи. Один – це властивість ширини width, яке ми анимируем, встановивши його на show. Ми встановили у своєму CSS атрибут display елемента span на none, так що функція встановлює його на block шляхом анімації його ширини на тисячу мілісекунд (другий аргумент функції animate), тобто на одну секунду. Тому, що анімована ширина, анімація рухається зліва направо, а ми добилися ілюзії того, що елемент розфарбовується в новий колір.

Після закриття круглої дужки ставимо кому. Потім пишемо другу функцію, анимирующую span, коли миша прибирається зі посилання:

$(this).find(«span»).fadeOut(800);

На цей раз вона знаходить елемент span і змушує його «згаснути» за 800 мілісекунд. Наступний ефект – це проста варіація першого. Ми анимируем елемент span, так що він здається раскрашиваемым зверху вниз. Сценарій шукає посилання, розташовані всередині елементів з класом fromTop.

//From the top
$(function() {
$(«.fromTop a»).hover(
function(){
$(this).find(«span»).stop(true, true).animate({ height: ‘show’ }, 1000);
},
function(){
$(this).find(«span»).fadeOut(800);
});
})

Ця функція відрізняється від першої тільки аніміруемим властивістю; тепер ми показуємо елемент span, анимируя його висоту. При убирании миші ми робимо загасання елемента span.

Для досягнення такого ефекту нам потрібно зробити деякі зміни в стилях. Ви пам’ятаєте, що у елементів span, розташованих усередині посилань News і Services, властивості display встановлені на block. Ми це зробили тому, що наступні два ефекту в основному такі ж, як два перших, тільки навпаки.

//From the right
$(function() {
$(«.fromRight a»).hover(
function(){
$(this).find(«span»).stop(true, true).animate({ width: ‘hide’ }, 1000);
},
function(){
$(this).find(«span»).fadeIn(800);
});
})

Для застосування мазка пензля справа наліво ми анимируем його висоту і встановлюємо її на hide. У своєму CSS ми переключили фони посилання і елемента span. Стан за замовчуванням зеленого фону додається до span, а стан проведення мишею жовтого фону — до елементу link. Щоб показати стан за замовчуванням при убирании миші, нам потрібно поступово проявити елемент span.

Наступний ефект (знизу вгору) ідентичний попередньому. В основному це зворотний варіант ефекту зверху вниз.

//From the bottom
$(function() {
$(«.fromBottom a»).hover(
function(){
$(this).find(«span»).stop(true, true).animate({ height: ‘hide’ }, 1000);
},
function(){
$(this).find(«span»).fadeIn(800);
});
})

Так як ми перевернули фони посилання і елемента span, ми анимируем висоту, встановивши її на hide. Так досягається ефект мазка пензля в напрямку вгору. При убирании миші ми поступово виявляємо елемент span.

Цей останній ефект такий же, як перший, але у нього інший ефект при убирании миші:

//Slide-IN-OUT
$(function() {
$(«.inOut a»).hover(
function(){
$(this).find(«span»).stop(true, true).animate({ width: ‘show’ }, 1000);
},
function(){
$(this).find(«span»).animate({ width: ‘hide’ }, 1000);
});
})

При наведенні миші діапазон анимируется і у нас виходить мазок пензлем зліва. Використовуючи hide для анімації ширини при убирании миші, ми досягаємо ефекту, при якому вихідний колір фону забарвлюється починаючи праворуч.

Як видно, існує безліч комбінацій цього виду ефектів, а з застосуванням різної графіки кількість можливостей множиться. Спробуйте створити свою власну графіку і експериментуйте з кодом jQuery; ви напевно досягнете відмінних результатів.

Як побудувати навігацію «мазок» з допомогою jQuery

E-mail: [email protected]