Простой шаблон портфолио с изображениями предварительного просмотра проекта, которые выдвигаются, чтобы показать выбранный проект.
На этот раз мы играем с идеей перемещения блоков контента в качестве способа перехода от главной страницы / галереи к странице проекта. Все панели перемещаются вдоль оси y (ось x на более мелких устройствах), и движение инициируется тем, хочет ли пользователь узнать больше о проекте или хочет получить доступ к навигации.
Создание структуры
Структура HTML состоит из двух неупорядоченных списков:ul.cd-projects-previews
для изображений предварительного просмотра проекта и ul.cd-projects
для деталей проекта, а nav.cd-primary-nav
- обтекание основной навигации.
<div class="cd-projects-container">
<ul class="cd-projects-previews">
<li>
<a href="#0">
<div class="cd-project-title">
<h2>Project 1</h2>
<p>Brief description of the project here</p>
</div>
</a>
</li>
<li>
<!-- project preview here -->
</li>
<!-- other project previews here -->
</ul> <!-- .cd-projects-previews -->
<ul class="cd-projects">
<li>
<div class="preview-image">
<div class="cd-project-title">
<h2>Project 1</h2>
<p>Brief description of the project here</p>
</div>
</div>
<div class="cd-project-info">
<!-- project description here -->
</div> <!-- .cd-project-info -->
</li>
<!-- projects here -->
</ul> <!-- .cd-projects -->
<button class="scroll cd-text-replace">Scroll</button>
</div> <!-- .cd-project-container -->
<nav class="cd-primary-nav" id="primary-nav">
<ul>
<li class="cd-label">Navigation</li>
<li><a href="#0">The team</a></li>
<!-- navigation items here -->
</ul>
</nav> <!-- .cd-primary-nav -->
Добавление стиля
На небольших устройствах каждый предварительный просмотр <li>
имеет ширину, равную ширине и высоте окна просмотра, равной одной четверти высоты видового экрана (4 проекта в нашей демонстрации). Изображение предварительного просмотра проекта устанавливается как фоновое изображение его дочернего элемента <a>
; Он имеет высоту, равную высоте окна просмотра, и переводится в верхнюю часть, чтобы покрыть весь видовой экран.
.cd-projects-previews li {
height: 25%;
width: 100%;
overflow: hidden;
transition: transform 0.5s;
}
.cd-projects-previews a {
display: block;
height: 100vh;
width: 100%;
opacity: 0;
transition: opacity 0.5s;
transform: translateY(0%);
}
.cd-projects-previews li:nth-of-type(2) a {
transform: translateY(-25%);
}
.cd-projects-previews li:nth-of-type(3) a {
transform: translateY(-50%);
}
.cd-projects-previews li:nth-of-type(4) a {
transform: translateY(-75%);
}
Что касается деталей проекта .cd-projects > li
, каждый элемент списка имеет абсолютную позицию, ширину и высоту, равную ширине и высоте окна просмотра, и по умолчанию скрыт.
.cd-projects > li {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: opacity 0.3s;
}
Когда пользователь выбирает проект, класс .selected
добавляется в соответствующие .cd-projects > li
, а класс .slide-out
добавляется в предварительный просмотр проекта (в случайном порядке и с задержкой для создания слайд- ).
.cd-projects-previews li.slide-out {
transform: translateX(-100%);
}
.cd-projects > li.selected {
z-index: 1;
opacity: 1;
transition: opacity 0s;
}
На больших устройствах (ширина видового экрана больше 1024 пикселей) высота предварительного просмотра проекта установлена на 100%, а ее ширина равна одной четвертой ширины окна просмотра, а дочерний элемент <a>
переведен влево, чтобы покрыть весь видовой экран.
@media only screen and (min-width: 1024px) {
.cd-projects-previews li {
display: inline-block;
height: 100%;
width: 25%;
float: left;
}
.cd-projects-previews li.slide-out {
transform: translateY(-100%);
}
.cd-projects-previews a {
/* width equal to window width */
width: 400%;
}
.cd-projects-previews li:nth-of-type(2) a {
transform: translateX(-25%);
}
.cd-projects-previews li:nth-of-type(3) a {
transform: translateX(-50%);
}
.cd-projects-previews li:nth-of-type(4) a {
transform: translateX(-75%);
}
}
Что касается полностраничной навигации, то.cd-primary-nav
размещается под контейнером .cd-projects-container
; Когда пользователь нажимает кнопку .cd-nav-trigger
, класс .slide-out
добавляется в предварительный просмотр проекта, чтобы показать навигацию.
.cd-primary-nav {
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: auto;
text-align: center;
opacity: 0;
transition: opacity 0.6s;
}
.cd-primary-nav.nav-visible {
opacity: 1;
}
О числе проектов: если вам нужно создать более 4 проектов, вам необходимо обновить ширину / высоту предварительного просмотра проекта (и перевести значение его <a>
пунктов). Однако если вы используете SASS, вы можете обновить переменную $items
в partials> _variables.scss.
Обработка событий
Мы использовали jQuery для обнаружения событий щелчка при предварительном просмотре проекта и элемента .cd-nav-trigger
.
Когда пользователь выбирает проект / открывает основную навигацию, функция slideToggleProjects()
выполняет разворачивание / выключение проектов, а функция makeUniqueRandom()
используется для извлечения случайных чисел (от 1 до 4) для выхода проектов заказ.
function slideToggleProjects(projectsPreviewWrapper, projectIndex, index, bool) {
var randomProjectIndex = makeUniqueRandom();
if( index < numRandoms - 1 ) {
projectsPreviewWrapper.eq(randomProjectIndex).toggleClass('slide-out', bool);
setTimeout( function(){
//animate next preview project
slideToggleProjects(projectsPreviewWrapper, projectIndex, index + 1, bool);
}, 150);
} else {
//this is the last project preview to be animated
projectsPreviewWrapper.eq(randomProjectIndex).toggleClass('slide-out', bool).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
// ...
animating = false;
});
}
}