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

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

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

Шаг 1. HTML

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

</div>

<h2>Проект</h2>

<p>Описание</p>

</div>

</a>

</li>

<li>

</li>

</ul>

<li><a href="#0" class="prev inactive">Вперед</a></li>

<li><a href="#0" class="next">Назад</a></li>

</ul>

</div>

<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 класс, когда пользователь нажимает кнопку действия) и реализации базовой навигации слайдера ( кнопки следующий / предыдущий с помощью клавиатуры).