Приклад адаптивної верстки Портфоліо з фільтрацією робіт на jQuery

68

Грамотно складене і візуально оформлене портфоліо, в нашому випадку, це окрема сторінка, є важливим елементом особистого сайту або блогу, будь-якого фахівця, який досяг певного рівня майстерності у своїй професійній діяльності.
Сторінка портфоліо, це такий своєрідний звіт, або візуальне резюме, з допомогою якого ви зможете наочно продемонструвати читачам і відвідувачам сайту/блогу, набір найбільш вдалих реалізованих робіт, будь то фотографії, статті, публікації, елементи дизайну і т. п.
У мене такої сторінки немає і, це з мого боку, прикре упущення, яке потрібно, як можна швидше виправити, над чим власне зараз і працюю.
На безкрайніх просторах глобальної мережі, можна знайти величезну кількість готових шаблонів сторінок для організації портфоліо, і різноманітність таких сторінок, по-справжньому вражає. Так що, кому в лом вникати у всі тонкощі веб-дизайну і розробки, завжди зможуть знайти підходящий для себе варіант. Ну, а для стражденних пізнань в сайтобудівництво, пропоную розібрати приклад адаптивної верстки, простий сторінки портфоліо, з фільтрацією виконаних робіт за категоріями, виконаної на jQuery, розбавленої привабливим ефектом переходу, з елементами анімації CSS3.

ДемоСкачать

Макет сторінки, виконуваний javascript і деякі елементи оформлення, видав «на гора», чудовий веб-дизайнер і розробник Kevin Liew (queness.com). При виборі оптимального рішення, для мене було важливо, це простота виконання, функціональність плагін jQuery, коректна робота у всіх сучасних браузерах, та враховуючи зростаючу популярність використання різних мобільних пристроїв, для інтернет-серфінгу, адаптивність дизайну майбутньої сторінки. Ніяких вигадливих, дизайнерських наворотів і великовагових плагінів.

Базовий макет складається з двох основних елементів користувальницького інтерфейсу, які нам належить побудувати, це навігації вкладками для фільтрації категорій представлених робіт, і сама сітка мініатюр з ефектом спливаючій підпису при наведенні.
Для початку, щоб все в підсумку запрацювало, буде необхідний jQuery не нижче версії 1.7.0. Якщо він у вас ще не підключений, то додайте наступний рядок перед тегом :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

Відразу після jQuery підключаєте файли зі скриптами (знаходяться в архіві з исходниками), необхідні для роботи фільтрації з переходами і реалізації спливаючих підписів до картинок:

<script type="text/javascript" src="js/jquery.easing.min.js">
<script type="text/javascript" src="js/jquery.mixitup.min.js">

Запустіть плагін MixItUp в роботу, вставте цей код після вищевказаних файлів:

<script type="text/javascript">
$(function () {
var filterList = {
init: function () {
$('#portfoliolist').mixitup({
targetSelector: '.portfolio',
filterSelector: '.filter',
effects: ['fade'],
easing: 'snap',
// call the hover effect
onMixEnd: filterList.hoverEffect()
});
},
hoverEffect: function () {
$('#portfoliolist .portfolio').hover(
function () {
$(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');
},
function () {
$(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');
}
);
}
};
filterList.init();
});

$(function () {
var filterList = {
init: function () {
$(‘#portfoliolist’).mixitup({
targetSelector: ‘.portfolio’,
filterSelector: ‘.filter’,
effects: [‘fade’],
easing: ‘snap’,
// call the hover effect
onMixEnd: filterList.hoverEffect()
});
},
hoverEffect: function () {
$(‘#portfoliolist .portfolio’).hover(
function () {
$(this).find(‘.label’).stop().animate({bottom: 0}, 200, ‘easeOutQuad’);
$(this).find(‘img’).stop().animate({top: -30}, 500, ‘easeOutQuad’);
},
function () {
$(this).find(‘.label’).stop().animate({bottom: -40}, 200, ‘easeInQuad’);
$(this).find(‘img’).stop().animate({top: 0}, 300, ‘easeOutQuad’);
}
);
}};
filterList.init();
});

Окремо розглядати всі опції плагіна, сенсу немає, за замовчуванням виставлене досить оптимальний варіант. Ну, якщо вже кого вставить на експерименти з параметрами, будь ласка, все у ваших силах.

Для формування макета сторінки і зовнішнього вигляду елементів, підключаєте до документа парочку файлів .css, один для базових стилів, назвемо його, наприклад: layout.css і ще один маленький CSS файл normalize.css, для забезпечення кращої узгодженості браузерів в стандартному оформленні елементів:

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/layout.css">

Тепер розберемо все по порядку, по можливості без зайвої води, доступно і зрозуміло, рідною, багатостраждальному нашій мові.

Html

Розмітку панелі навігації по категоріям, виконаємо у вигляді неупорядкованого списку UL з фільтром даних data-filter:

<ul id="filters" class="clearfix">
<li><span class="active filter" data-filter="app card icon logo web">Всі</span></li>
<li><span class="filter" data-filter="app">Програми</span></li>
<li><span class="filter" data-filter="card">Візитки</span></li>
<li><span class="filter" data-filter="icon">Іконки</span></li>
<li><span class="filter" data-filter="logo">Логотип</span></li>
<li><span class="filter" data-filter="web">Веб-Дизайн</span></li>
</ul>
  • Всі
  • Додатка
  • Візитки
  • Іконки
  • Логотип
  • Веб-Дизайн

На панелі навігації, розміщуємо весь список робіт, розбитий на категорії. Нам необхідно кожну категорію портфоліо через атрибут data-cat пов’язати з тим чи іншим пунктом панелі навігації у відповідності зі значенням атрибута data-filter. Шляхом зіставлення значень data-filter з data-cat, і відфільтрувати елементів портфоліо за категоріями.
Крім цього, додамо до мініатюрі, заховану до пори до часу, невелику панель з назвою роботи і заголовком категорії, спливаючу тільки при наведенні на картинку. А щоб легше сформувати зовнішній вигляд всієї цієї конструкції в CSS, пропишемо відповідні класи елементів:

<div id="portfoliolist">
<div class="portfolio logo" data-cat="logo">
<div class="portfolio-wrapper">
<img src="images/5.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Хостинг Beget.Ru</a>
<span class="text-category">Логотип</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
.........
</div>

Хостинг Beget.Ru
Логотип

………

Зверніть увагу, що ви можете додати посилання на картинці або безпосередньо у підпис, для того щоб користувач зміг в повному обсязі споглядати всі ваші труди.

CSS

Тепер, тихим сапом, переходимо до найцікавішого, до формування в CSS загальних стилів інтерфейсу нашої сторінки портфоліо і адаптивної її версії. У статті вкажу лише базові (за замовчуванням) значення, тобто без будь-яких фонових картинок і підключених шрифтів, все це, кому воно треба, можна побачити в демо, або знайти в архіві з вихідними кодами.

.container {
position: relative;
width: 960px;
margin: 0 auto;
/* Ви зможете бачити ланцюг переходів при зміні розмірів вікна браузера */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#filters {
margin:1%;
padding:0;
list-style:none;
}
#filters li {
float:left;
}
#filters li span {
display: block;
padding:5px 20px;
text-decoration:none;
color:#666;
/* додаємо трохи тіні для тексту */
text-shadow: 1px 1px #FFFFFF;
cursor: pointer;
}
/* змінюємо фон категорії при наведенні */
#filters li span:hover {
background: #34B7CD;
text-shadow: 0 0 2px #004B7D;
color:#fff;
}
/* фон активного пункту категорії */
#filters li span.active {
background: rgb(62, 151, 221);
text-shadow: 0 0 2px #004B7D;
color:#fff;
}
#portfoliolist .portfolio {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
width:23%;
margin:1%;
display:none;
float:left;
overflow:hidden;
}
.portfolio-wrapper {
overflow:hidden;
position: relative !important;
background: #666;
cursor:pointer;
}
.portfolio img {
max-width:100%;
position: relative;
}
/* підпису за замовчуванням приховані */
.portfolio .label {
position: absolute;
width: 100%;
height:40px;
bottom:-40px;
}
.portfolio .label-bg {
background: rgb(62, 151, 221);
width: 100%;
height:100%;
position: absolute;
top:0;
left:0;
}
.portfolio .label text {
color:#fff;
position: relative;
z-index:500;
padding:5px 8px;
}
.portfolio .text-category {
display:block;
font-size:9px;
}

.container {
position: relative;
width: 960px;
margin: 0 auto;
/* Ви зможете бачити ланцюг переходів при зміні розмірів вікна браузера */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#filters {
margin:1%;
padding:0;
list-style:none;
}
#filters li {
float:left;
}
#filters li span {
display: block;
padding:5px 20px;
text-decoration:none;
color:#666;
/* додаємо трохи тіні для тексту */
text-shadow: 1px 1px #FFFFFF;
cursor: pointer;
}
/* змінюємо фон категорії при наведенні */
#filters li span:hover {
background: #34B7CD;
text-shadow: 0 2px 0 #004B7D;
color:#fff;
}
/* фон активного пункту категорії */
#filters li span.active {
background: rgb(62, 151, 221);
text-shadow: 0 2px 0 #004B7D;
color:#fff;
}
#portfoliolist .portfolio {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
width:23%;
margin:1%;
display:none;
float:left;
overflow:hidden;
}
.portfolio-wrapper {
overflow:hidden;
position: relative !important;
background: #666;
cursor:pointer;
}
.portfolio img {
max-width:100%;
position: relative;
}
/* підпису за замовчуванням приховані */
.portfolio .label {
position: absolute;
width: 100%;
height:40px;
bottom:-40px;
}
.portfolio .label-bg {
background: rgb(62, 151, 221);
width: 100%;
height:100%;
position: absolute;
top:0;
left:0;
}
.portfolio .label text {
color:#fff;
position: relative;
z-index:500;
padding:5px 8px;
}
.portfolio .text-category {
display:block;
font-size:9px;
}

У другій частині, прямо в цій же таблиці стилів, за допомогою декількох медіа запитів створимо альтернативні секції CSS. Щоб макет нашої сторінки коректно відображався на екранах різних мобільних пристроїв, додамо й альтернативні правила CSS для різних екранів у ці секції. Тим самим ми запросто перевизначаємо будь-які правила, встановлені раніше в нашій CSS таблиці для звичайних браузерів і досягнемо тієї самої, жаданої адаптивності.

/* Планшет */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.container {
width: 768px;
}
}
/* Мобільний - Примітка: Дизайн для ширини 320px*/
@media only screen and (max-width: 767px) {
.container {
width: 95%;
}
#portfoliolist .portfolio {
width:48%;
margin:1%;
}
}
/* Мобільний - Примітка: Дизайн для ширини 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container {
width: 70%;
}
}

/* Планшет */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.container {
width: 768px;
}
}
/* Мобільний – Примітка: Дизайн для ширини 320px*/
@media only screen and (max-width: 767px) {
.container {
width: 95%;
}
#portfoliolist .portfolio {
width:48%;
margin:1%;
}
}/* Мобільний – Примітка: Дизайн для ширини 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container {
width: 70%;
}
}

От і все. Наша чудова сторінка під красномовною назвою «Портфоліо» готова, залишається лише наповнити її своїми не менш чудовими та визначними роботами, і виставити на огляд всьому світу. Можна ще по тихому, скромно так, пишатися собою. Головне не перестаратися в цьому ділі.
Дивіться ще раз приклад і при необхідності забирайте исходники, на дозвіллі, в тихій домашній обстановці, зможете довести до досконалості цю роботу.

ДемоСкачать

При створенні уроку використовувався матеріал: queness.com. Оригінальна, невинно чистий, щойно з-під пера автора, сторінка портфоліо, знаходиться там же.

Удачі всім і з користю для тіла, провести залишки короткого літа!

driver

Буду вдячний, якщо поділитеся посиланням на цю статтю в своїх соц. мережах: