Все для веб-дизайнера
Как создать стильное портфолио на HTML5
В наше время технологии для веб-мастеров быстро развиваются, предоставляя нам новые и все интересные возможности разработки новых креативных идей с помощью технологий HTML 5, jQuery и плагина Quicksand. Данное портфолио отлично выглядит и будет работать даже если у посетителя отключен JavaScript, то он все равно увидит работы, что благотворно сказывается на SEO сайта. Данное портфолио мозно с легкостью отредактировать под свое усмотрение и добавить в него необходимые элементы..
Для начала нам необходимо создать разметку нового документа HTML5. В разделе заголовка включим стиль страницы. Библиотека jQuery, плагин Quicksand и наш файл script.js будут включены перед закрывающимся тегом body:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
Как создать стильное портфолио на HTML5 <!-- Наш файл CSS --> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <header> <h1>Мое портфолио</h1> </header> <nav id="filter"> <!-- Пункты меню будут располагаться здесь. Они генерируются кодом jQuery --> </nav> <section id="container"> </section> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script type="text/javascript" src="assets/js/jquery.quicksand.js"></script><script type="text/javascript" src="assets/js/script.js"></script> |
Элемент HTML5 header содержит наш заголовок h1 (который оформлен как логотип). Элементsection содержит неупорядоченный список пунктов портфолио другие списки добавляются кодом jQuery)/ Элемент nav, оформленный как зеленая полоса, действует как фильтр содержания.
Неупорядоченный список #stage содержит пункты нашего портфолио. Каждый пункт имеет атрибут data, который определяет серию разделенных запятой меток. Позже, в коде jQuery, мы проходим циклом список, записываем метки и создаем категории, которые могут быть выбраны на зеленой полоске меню.
|
1 2 3 4 5 6 7 8 9 |
</pre> <ul> <li data-tags="Типографика"><img src="assets/img/shots/1.jpg" alt="Иллюстрация" /></li> <li data-tags="Логотипы,Типографика"><img src="assets/img/shots/2.jpg" alt="Иллюстрация" /></li> <li data-tags="Веб дизайн,Логотипы"><img src="assets/img/shots/3.jpg" alt="Иллюстрация" /></li> </ul> <pre> |
Плагин Quicksand сравнивает два неупорядоченных списка, находит одинаковые элементы liв них, и анимирует процесс расстановки. Скрипт jQuery, который разбирается в данной части урока, проходит циклом по пунктам портфолио в списке #stage и создает новые (скрытые) неупорядоченные списки для каждой найденной метки. Данные списки затем будут использоваться для работы плагина Quicksand.
|
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 28 29 |
$(document).ready(function(){ var items = $('#stage li'), itemsByTags = {}; // Цикл по всем элементам li: items.each(function(i){ var elem = $(this), tags = elem.data('tags').split(','); // Добавляем атрибут data-id. Требуется плагином Quicksand: elem.attr('data-id',i); $.each(tags,function(key,value){ // Удаляем лишние пробелы: value = $.trim(value); if(!(value in itemsByTags)){ // Создаем пустой массив для пунктов: itemsByTags[value] = []; } // Каждый пункт добавляется в один массив по метке: itemsByTags[value].push(elem); }); }); |
Каждая метка добавляется в объект itemsByTags как массив. Значит, itemsByTags['Веб дизайн'] будет содержать массив всех пунктов, которые имеют метку ‘Веб дизайн’. Мы используем данный объект для создания скрытого нецпорядоченного списка на странице для плагина Quicksand.
|
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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
function createList(text,items){ // Вспомогательная функция, которая получает текст кнопки меню и // массив пунктов li // Создаем пустой неупорядоченный список var ul = $('</pre> <ul> <ul>',{'class':'hidden'});</ul> </ul> <ul> <ul>$.each(items,function(){</ul> </ul> <ul> <ul>// Создаем копию каждого пункта li</ul> </ul> <ul> <ul>// и добавляем ее в список:</ul> </ul> <ul> <ul>$(this).clone().appendTo(ul);</ul> </ul> <ul> <ul>});</ul> </ul> <ul> <ul>ul.appendTo('#container');</ul> </ul> <ul> <ul>// Создаем пункт меню. Неупорядоченный список добавляется</ul> </ul> <ul> <ul>// как параметр data (доступен через .data('list'):</ul> </ul> <ul> <ul>var a = $('</ul> </ul> <a>',{ html: text, href:'#', data: {list:ul} }).appendTo('#filter'); } |
Данная функция получает имя группы и массив с пунктами li как параметры. Затем она клонирует данные пункты в новый список ul и добавляет ссылку на зеленую полоску. Теперь мы проходим циклом по всем группам и вызываем вспомогательную функцию, также добавляем обработку события click для пунктов меню.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// Создаем опцию "Все" в меню: createList('Все',items); // Цикл по массивам в itemsByTags: $.each(itemsByTags,function(k,v){ createList(k,v); }); $('#filter a').live('click',function(e){ var link = $(this); link.addClass('active').siblings().removeClass('active'); // Используем плагин Quicksandдля анимации пунктов li. // Он использует data('list'), определённую нашей функцией createList: $('#stage').quicksand(link.data('list').find('li')); e.preventDefault(); }); $('#filter a:first').click(); |
Самая интересная часть стилей CSS — зеленая плоска #filter. Для нее используются псевдо-элементы :before / :after, чтобы создать привлекательные уголки по сторона полоски. Так как они позиционируются абсолютно, то при изменении размеров полоски они выведутся там, где надо.
|
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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
#filter { background: url("../img/bar.png") repeat-x 0 -94px; display: block; height: 39px; margin: 55px auto; position: relative; width: 600px; text-align:center; -moz-box-shadow:0 4px 4px #000; -webkit-box-shadow:0 4px 4px #000; box-shadow:0 4px 4px #000; } #filter:before, #filter:after { background: url("../img/bar.png") no-repeat; height: 43px; position: absolute; top: 0; width: 78px; content: ''; -moz-box-shadow:0 2px 0 rgba(0,0,0,0.4); -webkit-box-shadow:0 2px 0 rgba(0,0,0,0.4); box-shadow:0 2px 0 rgba(0,0,0,0.4); } #filter:before { background-position: 0 -47px; left: -78px; } #filter:after { background-position: 0 0; right: -78px; } #filter a{ color: #FFFFFF; display: inline-block; height: 39px; line-height: 37px; padding: 0 15px; text-shadow:1px 1px 1px #315218; } #filter a:hover{ text-decoration:none; } #filter a.active{ background: url("../img/bar.png") repeat-x 0 -138px; box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2), -1px 0 0 rgba(255, 255, 255, 0.2), 1px 0 1px rgba(0,0,0,0.2) inset, -1px 0 1px rgba(0,0,0,0.2) inset; |
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
| Опубликовал Cooper 03.12.2011 в 13:08, в категории Веб-дизайн. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
