Автор

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

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


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

 

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

 

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

 

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

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

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


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

Сегодняшний пример - это простой шаблон. На больших устройствах контент разделяется на два основных контейнера.


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

Если вы хотите с экономить место на своем сайте, при этом привернуть внимание посетителей к информации оформленной оригинальным образом, тогда этот урок именно для Вас.  Речь о том, как сделать так, чтобы под изображением находился необходимый текст, и при наведении мышкой на изображений, этот текст красиво занимал место изображения. Данный эффект работает благодаря фреймворку jQuery. Что весьма удобно, ведь позволит достичь необходимого результата, давайте посмотрим что получилось..


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close