Шаблон портфолио ваших проектов для сайта

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

 

ДЕМО

ИСХОДНИКИ

 

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

 

Шаг 1. HTML

HTML структура состоит из 3-х основных блоков: .cd-intro-block элемента, содержащий кнопку действия, чтобы выявить шаблон проектов, неупорядоченный список .cd-slider, который будет отображать галерею проектов, а. .cd-project-content элемент с одного проекта.

</div>
<div class="cd-projects-wrapper">
<ul class="cd-slider">
<li class="current">
<a href="#0">
<img src="img/img.png" alt="project image">
<div class="project-info">
<h2>Проект</h2>
<p>Описание</p>
</div>
</a>
</li>
<li>
</li>
</ul>
<ul class="cd-slider-navigation cd-img-replace">
<li><a href="#0" class="prev inactive">Вперед</a></li>
<li><a href="#0" class="next">Назад</a></li>
</ul>
</div>
<div class="cd-project-content">
<div>
<h2>заголовок</h2>
<em>Описание.</em>
</div>
<a href="#0" class="close cd-img-replace">Закрыть</a>
</div>

Разметка не сложная, и с ней можно ознакомится в исходниках, мы добавили вызов всех проектов к одной странице с описанием, чтобы сократить шаблон.

 

Шаг 2. CSS

Когда пользователь щелкает a[data-action="show-projects"], тем .projects-visible класс добавляется в .cd-intro-block и .cd-projects-wrapper: этот класс запускает раздел анимации и отображает слайдер с проектами. .cd-intro-block трансформируется (вдоль оси Y) на 90%, в то время как .cd-projects-wrapper доступен для видна.

.cd-intro-block {
 transition: transform 0.5s;
 transition-timing-function: cubic-bezier(0.67, 0.15, 0.83, 0.83);
}
.cd-intro-block.projects-visible {
 transform: translateY(-90%);
 box-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
 cursor: pointer;
}
.cd-projects-wrapper {
 position: fixed;
 z-index: 1;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 visibility: hidden;
 transition: visibility 0s 0.5s;
}
.cd-projects-wrapper.projects-visible {
 visibility: visible;
 transition: visibility 0s 0s;
}

Для отображения анимации у нас будет, .slides-in - класс, который добавляется к каждому пункту проекта (с задержкой 50 мс);

Этот класс запускает другую анимацию в соответствии с размером экрана

На мобильных устройствах, каждый элемент списка имеет, по умолчанию, ширину: 100%, opacity:0; когда .slides-in класса добавлен, то cd-translate анимация будет применяться:

.cd-slider li {
opacity: 0;
}
.cd-slider li.slides-in {
opacity: 1;
animation: cd-translate 0.5s;
}
@keyframes cd-translate {
0% {
opacity: 0;
transform: translateY(100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

На настольных устройств (окно шириной более 900px), каждый элемент списка имеет, по умолчанию, ширину: 26%, translateX: 400%, а поворот установлен в значении: -10deg; когда .slides-in класс добавляется, каждый проект будет возвращаться в исходное положение (translateX: 0):

@media only screen and (min-width: 900px) {
.cd-slider li {
position: relative;
float: left;
width: 26%;
top: 50%;
transform: translateX(400%) translateY(-50%) rotate(-10deg);
transition: opacity 0s 0.3s, transform 0s 0.3s;
}
.cd-slider li.slides-in {
animation: none;
transform: translateY(-50%);
}
}

Для слайдера проектов (только настольная версия), все элементы списка находятся в относительном положении, имеют фиксированную ширину (26%) и float: left; А .cd-slide общая ширина будет правильно изменяться (с помощью JavaScript)., так что все элементы списка помещаются в одной строке:

@keyframes cd-slide-n {
0%, 100% {
transform: translateY(-50%);
}
50% {
transform: translateY(-50%) translateX(translateValue);
}
}

В принципе, анимация была определена для каждого элемента видимого в списке .cd-slider (в общей сложности 6); Каждая анимация отличается в значении translateX установленного в 50% ключевого кадра.

 

Шаг 3. JS

На настольных устройств, мы меняем .cd-slider ширину, так что его <li> дочерние элементы остаются в той же строке; мы использовали setSliderContainer () функцию, чтобы установить эту ширину; плюс, на изменение размера окна, мы обновляем .cd-slider перевести значение:

function setSliderContainer() {
var mq = checkMQ();
if ( mq == 'desktop' ) {
var slides = projectsSlider.children('li'),
slideWidth = slides.eq(0).width(),
marginLeft = Number(projectsSlider.children('li').eq(1).css('margin-left').replace('px', '')),
sliderWidth = ( slideWidth + marginLeft )*( slides.length ) + 'px',
slideCurrentIndex = projectsSlider.children('li.current').index();
projectsSlider.css('width', sliderWidth);
( slideCurrentIndex != 0 ) && setTranslateValue(projectsSlider, ( slideCurrentIndex * (slideWidth + marginLeft) + 'px'));
} else {
projectsSlider.css('width', '');
setTranslateValue(projectsSlider, 0);
}
resizing = false;
}
function setTranslateValue(item, translate) {
item.css({
'-moz-transform': 'translateX(-' + translate + ')',
'-webkit-transform': 'translateX(-' + translate + ')',
'-ms-transform': 'translateX(-' + translate + ')',
'-o-transform': 'translateX(-' + translate + ')',
'transform': 'translateX(-' + translate + ')',
});
}

var resizing = false;
setSliderContainer();
$(window).on('resize', function(){
if( !resizing ) {
window.requestAnimationFrame(setSliderContainer);
resizing = true;
}
});

Кроме того, мы использовали JQuery для добавления / удаления классов (например, .projects-visible  класс, когда пользователь нажимает кнопку действия) и реализации базовой навигации слайдера ( кнопки следующий / предыдущий с помощью клавиатуры).

Вот и все. Готово!

---