От автора: Сегодня мы создаем анимированную навигацию с помощью jQuery для веб-сайта в «акварельном» стиле, где ссылки будут «рисоваться» при проведении над ними мышью. «Акварельная» графика создавалась в Photoshop’е, а для анимации мы воспользуемся популярной базой jQuery JavaScript.
Перед тем, как заняться пошаговым построением навигации «мазок кистью» с помощью jQuery внизу можно посмотреть окончательную демоверсию учебника.
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
Графика — Photoshop
Фоновая канва – это шаблон из Photoshop’а (я пользуюсь CS4, но уверен, что она доступна и в предыдущих версиях), сгруппированный в разделе Greyscale Paper (бумага серых оттенков). Некоторые кисти из использованных мной для раскраски фона, можно найти в Bittbox water color brush sets (наборах акварельных кистей) том 1 и том 2. Наборы кистей еще можно найти онлайн и спорю, вы знаете, что я хочу сказать далее; Google вам в помощь.
У меня есть подсказки о создании мазков кистью. Во-первых, убедитесь, что установили «разбивку» (Spacing) кисти на очень низкое значение, так вы сделаете этот прием продолжительным. Ползунок разбивки Spacing находится под вкладкой «очертание кончика кисти» (Brush Tip Shape) в палитре кистей (если не можете найти, вызовите ее, нажав F5).
У меня в примере шесть элементов навигации, и я планирую оставить между ними поле в 6 пикселей. Это значит, что на 6 элементов мне останется 930 пикселей. Это 960 пикселей на контейнер DIV минус 30 пикселей на поля между пунктами (пять раз по 6 пикселей). Так у нас останется по 155 пикселей на пункт. Я, как видно на изображении ниже, пользовался белыми блоками в качестве границ для мазков, а затем дублировал их для тщательной подгонки под пункты навигации.
Код
Внизу на изображении можно увидеть структуру папок нашего примера. Она довольно простая. Папка для изображений, другая для файлов сценария, один файл HTML и CSS.
В следующих двух разделах описываются HTML и CSS демо-страницы.
Содержимое — HTML5
Для создания своей демо-страницы мы будем пользоваться некоторыми элементами HTML5. Вот весь код полностью, а затем мы обсудим каждую его часть.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE HTML> <html lang="en-US"> <head> <title>jQuery Nav Demo</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css" media="all"> <!--[if IE]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <!--[if lt IE 8]><script src="//ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]--> </head> <body> <header> <h1 id="logo">Fictive Company</h1> <nav class="clearfix"><ul> <li class="active fromLeft cssOnly"><a id="nHom" href="#"><span>Home</span></a></li> <li class="fromLeft cssOnly"><a id="nAbo" href="#"><span>About Us</span></a></li> <li class="fromTop cssOnly"><a id="nPro" href="#"><span>Products</span></a></li> <li class="fromBottom cssOnly"><a id="nNew" href="#"><span>News</span></a></li> <li class="fromRight cssOnly"><a id="nSer" href="#"><span>Services</span></a></li> <li class="inOut last cssOnly"><a id="nCon" href="#"><span>Contact Us</span></a></li> </ul></nav> </header> <script type="text/javascript" src="scripts/jquery-1.4.min.js"></script> <script type="text/javascript" src="scripts/myScripts.js"></script> </body> </html> |
Сначала давайте рассмотрим элемент HEAD, и вы заметите, что ему предшествуют очень простые объявления doctype и language.
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE HTML> <html lang="en-US"> <head> <title>jQuery Nav Demo</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css" media="all"> <!--[if IE]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <!--[if lt IE 8]><script src="//ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]--> </head> |
Теперь внутри тэга head у нас имеются несколько стандартных тэгов: title, тэг meta, определяющий набор характеристик, ссылка на нашу таблицу стилей и пара файлов JavaScript в условных комментариях. Первый файл JS добавлен для гарантии надлежащей поддержки HTML5 в Internet Explorer’е (IE).
Этот скрипт вынуждает IE назначать нужные стили элементам, которых он не узнает (как header, nav и другие новые элементы HTML5). Второй скрипт (IE8.js) добавляет современные характеристики CSS более старым версиям Internet Explorer’а.
Мы переходим к элементу body и своему неупорядоченному списку:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<body> <header> <h1 id="logo">Fictive Company</h1> <nav class="clearfix"><ul> <li class="active fromLeft cssOnly"><a id="nHom" href="#"><span>Home</span></a></li> <li class="fromLeft cssOnly"><a id="nAbo" href="#"><span>About Us</span></a></li> <li class="fromTop cssOnly"><a id="nPro" href="#"><span>Products</span></a></li> <li class="fromBottom cssOnly"><a id="nNew" href="#"><span>News</span></a></li> <li class="fromRight cssOnly"><a id="nSer" href="#"><span>Services</span></a></li> <li class="inOut last cssOnly"><a id="nCon" href="#"><span>Contact Us</span></a></li> </ul></nav> </header> |
После тэга body вставляем элемент header. На нашей странице есть только заголовок, содержащий логотип и навигацию, а если бы на ней было больше контента, тот находился бы под элементом заголовка. Во-первых, у нас имеется тэг H1, содержащий логотип. За ним следует элемент nav, содержащий навигацию.
Навигация сама по себе кодируется как неупорядоченный список. У каждого пункта списка есть свой назначенный класс, так что мы легко можем нацелиться на каждый из них с помощью jQuery. Идея состоит в том, чтобы продемонстрировать разные эффекты к каждому пункту списка. Помимо того, каждый пункт обернут в тэги span; об этот более подробно в следующем разделе CSS.
Внизу вид нашей страницы без применения стилей:
Содержимое — CSS
Как обычно, я начинаю CSS с версии CSS Reset от Эрика Майера (Eric Meyer). Потом добавляю хак Clearfix, новую версию от Джеффа Стара (Jeff Star).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* 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 как к элементам группового уровня.
Далее мы назначаем стили основным элементам разметки.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* 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’е изображении увидим только красивый текст.
Теперь следует последняя часть таблицы стилей, где мы назначаем стили неупорядоченному списку навигации.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* Navigation */ ul li { display: inline-block; position: relative; float: left; margin: 0 6px 20px 0; } 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 для установления поля последнего элемента на ноль.
Мы написали бы что-то вроде этого:
|
1 |
ul li:last-child { margin-right: 0 } |
К сожалению, некоторые браузеры не регистрируют этот псевдокласс. Он работает в Google Chrome, Opera, Firefox и Internet Explorer 7, но IE8 и Safari оборачивают последний элемент в следующую строку. Я считаю, что doctype HTML5 вызывает эту проблему. Если кто-нибудь знает о ней больше, пожалуйста, поделитесь своими знаниями в комментариях.
Мы переходим к позиционированию фонового изображения для каждого из пунктов меню:
|
1 2 3 4 5 6 |
#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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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 внизу раскрывает состояние проведения мышью и активное состояние ссылок:
|
1 2 3 4 5 6 7 8 9 10 |
/* 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
Мы подошли к основной части своего учебника. Вы, возможно, знакомы с техникой, обсуждавшейся в разделах об HTML и CSS, но, надеюсь, эта часть будет для вас новой. В конце своего файла index.html мы вызываем файл сценария myScripts.js, расположенный в папке со сценариями. Первое, что мы сделаем, это удалим класс cssOnly из всех элементов списка.
|
1 2 3 4 |
// If JS is disabled, CSS menu will still work $(function() { $("li").removeClass("cssOnly"); }); |
Так удаляется эффект проведения мышью hover, установленный в CSS, так что мы увидим только эффекты, анимированные jQuery.
Первый эффект будет анимировать мазок кистью слева направо. Все элементы с классом fromLeft будут анимированы нижеуказанным кодом:
|
1 2 3 4 5 6 7 8 9 10 |
//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. При проведении над ними мышью функция начинает выполняться:
|
1 |
$(this).find("span").stop(true, true).animate({ width: 'show' }, 1000); |
Функция находит элемент span, который является дочерним элементом ссылки, над которой проводят мышью, и анимирует его. Перед началом анимации stop говорит браузеру остановить прочую анимацию, которая может оказаться на очереди.
У функции animate здесь два аргумента. Один – это свойство ширины width, которое мы анимируем, установив его на show. Мы установили в своем CSS атрибут display элемента span на none, так что функция устанавливает его на block путем анимации его ширины на тысячу миллисекунд (второй аргумент функции animate), т.е. на одну секунду. Оттого, что анимирована ширина, анимация движется слева направо, а мы добились иллюзии того, что элемент раскрашивается в новый цвет.
После закрытия круглой скобки ставим запятую. Затем пишем вторую функцию, анимирующую span, когда мышь убирается со ссылки:
|
1 |
$(this).find("span").fadeOut(800); |
На этот раз она находит элемент span и заставляет его «затухнуть» за 800 миллисекунд. Следующий эффект – это простая вариация первого. Мы анимируем элемент span, так что он кажется раскрашиваемым сверху вниз. Сценарий ищет ссылки, расположенные внутри элементов с классом fromTop.
|
1 2 3 4 5 6 7 8 9 10 |
//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. Мы это сделали потому, что следующие два эффекта в основном такие же, как два первых, только наоборот.
|
1 2 3 4 5 6 7 8 9 10 |
//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.
Следующий эффект (снизу вверх) идентичен предыдущему. В основном это обратный вариант эффекта сверху вниз.
|
1 2 3 4 5 6 7 8 9 10 |
//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.
Этот последний эффект такой же, как первый, но у него другой эффект при убирании мыши:
|
1 2 3 4 5 6 7 8 9 10 |
//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; вы наверняка добьетесь отличных результатов.
Автор: Marko Randjelovic
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
E-mail: contact@webformyself.com
Комментарии (12)