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

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

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

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

Шаг 1. HTML

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

<div class="cd-intro-block">
</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>

</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;
}

.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);
}
}

.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%);
}
}

@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);
}
}

@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;
}
});

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

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

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JS

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

Читайте также:

Интересно:

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи

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

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JS

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

Читайте также:

Интересно:

Зайти

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи