Отличное портфолио на HTML5

В данном уроке мы сделаем отличное портфолио на основе HTML5, jQuery и плагина Quicksand. Потенциально демонстрационное портфолио может быть существенно расширено без особых усилий.

demosourse

 

HTML

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

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        
        <title>Портфолио на HTML5 | Материалы сайта RUSELLER.COM</title>
        
        <!-- Наш файл CSS -->
        <link rel="stylesheet" href="assets/css/styles.css" />
        
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    
    <body>

        <header>
            <h1>Мое портфолио</h1>
        </header>
        
        <nav id="filter">
	<!-- Пункты меню будут располагаться здесь. Они генерируются кодом jQuery -->
	</nav>

        <section id="container">
            <ul id="stage">
            	<!-- Пункты портфолио располагаются здесь -->
            </ul>
        </section>
                  
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script src="assets/js/jquery.quicksand.js"></script>
        <script src="assets/js/script.js"></script>
    
    </body>
</html>

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

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

 

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

Вы можете поместить в список пунктов другие работы и использовать другие метки.

Портфолио работ

 

jQuery

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

После загрузки страницы мы запускаем цикл для обнаружения меток.

script.js – Часть 1

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

Создадим вспомогательные функции

script.js – Part 2

	function createList(text,items){
		
		// Вспомогательная функция, которая получает текст кнопки меню и 
		// массив пунктов li
		
		// Создаем пустой неупорядоченный список
		var ul = $('<ul>',{'class':'hidden'});
		
		$.each(items,function(){
			// Создаем копию каждого пункта li 
			// и добавляем ее в список:
			
			$(this).clone().appendTo(ul);
		});

		ul.appendTo('#container');

		// Создаем пункт меню. Неупорядоченный список добавляется 
		// как параметр data (доступен через .data('list'):
		
		var a = $('<a>',{
			html: text,
			href:'#',
			data: {list:ul}
		}).appendTo('#filter');
	}

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

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

script.js – Часть 3

	// Создаем опцию "Все" в меню:
	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 

Самая интересная часть стилей CSS - зеленая полоска #filter. Для нее используются  псевдо-элементы :before / :after, чтобы создать привлекательные уголки по сторонам полоски. Так как они позиционируются абсолютно, то при изменении размеров полоски они выведутся там, где надо.

styles.css

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

Зеленая полоска         меню

 

Готово!

Вы можете использовать шаблон для своих проектов. Изменение содержания портфолио осуществляется просто. Если у пользователя отключен JavaScript, то он все равно увидит работы, что благотворно сказывается на SEO сайта.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: tutorialzine.com/2011/06/beautiful-portfolio-html5-jquery/
Перевел: Сергей Фастунов
Урок создан: 14 Октября 2011
Просмотров: 75727
Правила перепечатки


5 последних уроков рубрики "HTML и DHTML"

^ Наверх ^