Автор

19 04.2013
Стильное портфолио на HTML5

Стильное портфолио на HTML5


 

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

 

ДЕМО
ИСХОДНИКИ

 

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

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

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

 

Плагин 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>
&nbsp;
<ul>
<ul>// Создаем копию каждого пункта li</ul>
</ul>
&nbsp;
<ul>
<ul>// и добавляем ее в список:</ul>
</ul>
<ul>
<ul>$(this).clone().appendTo(ul);</ul>
</ul>
&nbsp;
<ul>
<ul>});</ul>
</ul>
<ul>
<ul>ul.appendTo('#container');</ul>
</ul>
<ul>
<ul>// Создаем пункт меню. Неупорядоченный список добавляется</ul>
</ul>
&nbsp;
<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 для пунктов меню.

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

 

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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеHTML5

19 03.2013
Стильное портфолио на HTML5

В заметке собраны потрясающие решения для реализации развернутой навигации по сайту. Выпадающие вертикальные и горизонтальные меню с огромным количеством пунктов идеально подойдут для сайтов со сложной структурой или интернет-магазинов. Помимо пунктов в этих меню в выпадающую область можно поместить другое содержимое, например изображения с описанием.


26 01.2018
Стильное портфолио на HTML5

Красивый сайт остается в памяти посетителя очень долго, и это несомненно прекрасно. Сегодня мы бы хотели поговорить об замечательный заглушке на ваш сайт...


03 07.2013
Стильное портфолио на HTML5

Сегодня один посетитель данного сайта выразил свое недовольство что я обманываю своих клиентов!!! Написал отзыв, но при этом не оставил своих координат для ответа!!! Можно было бы оставить без внимания этот отзыв, но я решил написать ответ, так как очень часто подобные умники пишут толком не разобравшись!


07 04.2013
Стильное портфолио на HTML5

Всем вам, дорогие друзья, хочется сделать оригинальный сайт, чтобы было креативно все оформлено, кроме этого бросалось в глаза необходимая информация. Для удобства, веб-мастера, разрабатывают вспомогательную навигацию, к примеру, вертикальный аккордеон с содержанием. Такой вариант станет отличным решением для сайта в темных тонах, и не только. Кроме этого мы используем градиенты, что весьма ускорит загрузку сайта. И так, давайте посмотрим, что у нас получилось.


105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close