Автор

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

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

Рассмотрим оригинальную форму обратной саязи на jQuery. Такая форма легко украсит любой сайт.


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

Отзывчивый фрагмент тура с пошаговым руководством, чтобы помочь пользователям понять, как использовать ваш сайт.


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

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


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

В данном уроке мы создадим интересные визуальные 3D эффекты с помощью CSS3 и jQuery. Идея для урока возникла под впечатлением страниц демонстрации проектов Google SketchUp.

В нашем примере мы будем использовать миниатюры, которые открывают дополнительную информацию при наведении курсора мыши на них. Структура будет построена на jQuery, который позволит вывести изображение в сложенном или отогнутом виде при наведении курсора мыши. Для формирования эффектов будем использовать трансформации CSS 3D. В тексте урока префиксы браузеров опущены для большей наглядности. Полный код можно посмотреть в исходниках к уроку.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close