Автор

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

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

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

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


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

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


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

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


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

Если перед вами встала задача реализовать эффект вращения изображения на 360 градусов то вам будет полезен следующий плагин jQueryThreesixty - достаточно универсальный плагин который позволяет достичь эффект вращения изображений под любым углом. Такие эффекты вращения стали весьма популярны в интернет-магазинах, ведь позволяют дать полное представление о товаре. Кроме этого плагин является кроссбраузерным, а это весьма упрощает жизнь при разработке.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close