Автор

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

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


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

 

ДЕМО
ИСХОДНИКИ

 

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

 

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

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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеJS

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

В этой статье подготовлены 8 интересных эффектов для изображений, которые Вы можете применить на своем сайте. Каждый эффект состоит из HTML разметки и стилей CSS. Вам остается только скопировать и добавить в свой исходный код.


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

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


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

Я уже публиковал урок «Нестандартные Checkbox (RadioButton) без использования JavaScript». Прекрасные кнопочки, но там используются картинки!!! В данном примере используется только CSS. Всё очень просто вы вставляете код в свой стиль и получаете стильные, а именно на мой взгляд, в современном стиле кнопки.


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

Анимация с поддержкой CSS, которая заменяет обновление страницы при обновлении контента с помощью jQuery.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close