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

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

 

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 сайта.

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/pvlQZxzN4Po/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Отличное портфолио на HTML5 | | 2012-06-19 12:02:30 | | Статьи Web-мастеру | | В данном уроке мы сделаем отличное портфолио на основе HTML5, jQuery и плагина Quicksand. Потенциально демонстрационное портфолио может быть существенно расширено без особых усилий. HTMLСначала | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: