Отличное портфолио на 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, jQuery и плагина Quicksand. Потенциально демонстрационное портфолио может быть существенно расширено без особых усилий. HTMLСначала |
РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
"В будущем на рынке останется два вида компаний: те, кто в Интернет и те, кто вышел из бизнеса." |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их !
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Мы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!
Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...
Мы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.
Контекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.