Как создать стильное портфолио на HTML5

В наше время технологии для веб-мастеров быстро развиваются, предоставляя нам новые и все интересные возможности разработки новых креативных идей с помощью технологий HTML 5, jQuery и плагина Quicksand. Данное портфолио отлично выглядит и будет работать даже если у посетителя отключен JavaScript, то он все равно увидит работы, что благотворно сказывается на SEO сайта. Данное портфолио мозно с легкостью отредактировать под свое усмотрение и добавить в него необходимые элементы..

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Для начала нам необходимо создать разметку нового документа HTML5. В разделе заголовка включим стиль страницы. Библиотека jQuery, плагин Quicksand и наш файл script.js будут включены перед закрывающимся тегом body:

<!--[if lt IE 9]>

<![endif]-->

<h1>Мое портфолио</h1>

</header>

</section>

Элемент HTML5 header содержит наш заголовок h1 (который оформлен как логотип). Элементsection содержит неупорядоченный список пунктов портфолио другие списки добавляются кодом jQuery)/ Элемент nav, оформленный как зеленая полоса, действует как фильтр содержания.

Неупорядоченный список #stage содержит пункты нашего портфолио. Каждый пункт имеет атрибут data, который определяет серию разделенных запятой меток. Позже, в коде jQuery, мы проходим циклом список, записываем метки и создаем категории, которые могут быть выбраны на зеленой полоске меню.

</pre>

<ul>

</ul>

<pre>

Плагин Quicksand сравнивает два неупорядоченных списка, находит одинаковые элементы liв них, и анимирует процесс расстановки. Скрипт jQuery, который разбирается в данной части урока, проходит циклом по пунктам портфолио в списке #stage и создает новые (скрытые) неупорядоченные списки для каждой найденной метки. Данные списки затем будут использоваться для работы плагина Quicksand.

$(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.

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.appendTo('#container');</ul>

</ul>

<ul>

<ul>// Создаем пункт меню. Неупорядоченный список добавляется</ul>

</ul>

<ul>

<ul>// как параметр data (доступен через .data('list'):</ul>

</ul>

<ul>

</ul>

<a>',{

html: text,

href:'#',

data: {list:ul}

}).appendTo('#filter');

}

Данная функция получает имя группы и массив с пунктами li как параметры. Затем она клонирует данные пункты в новый список ul и добавляет ссылку на зеленую полоску. Теперь мы проходим циклом по всем группам и вызываем вспомогательную функцию, также добавляем обработку события click для пунктов меню.

// Создаем опцию "Все" в меню:

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

#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;

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Как создать стильное портфолио на HTML5

Читайте также:

Последние новости

Эффект анимации текста при помощи TweenMax

5 важных элементов при создании лендинга

Как создать эффект 3d изображений на WebGL

OpenCart-шаблоны для идеального магазина

Бесплатные мокапы для презентации бизнеса

Меню сайта в виде сетки с помощью anime.js

Не пропусти