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

 

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

Шаг 1. HTML

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

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

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

Шаг 2. CSS

Когда пользователь щелкает a[data-action="show-projects"], тем .projects-visible класс добавляется в .cd-intro-block и .cd-projects-wrapper: этот класс запускает раздел анимации и отображает слайдер с проектами. .cd-intro-block трансформируется (вдоль оси Y) на 90%, в то время как .cd-projects-wrapper доступен для видна.

Для отображения анимации у нас будет, .slides-in - класс, который добавляется к каждому пункту проекта (с задержкой 50 мс); . Этот класс запускает другую анимацию в соответствии с размером экрана
На мобильных устройствах, каждый элемент списка имеет, по умолчанию, ширину: 100%, opacity:0; когда  .slides-in  класса добавлен, то cd-translate анимация будет применяться:

На настольных устройств (окно шириной более 900px), каждый элемент списка имеет, по умолчанию, ширину: 26%, translateX: 400%, а поворот установлен в значении: -10deg; когда  .slides-in класс добавляется, каждый проект будет возвращаться в исходное положение (translateX: 0):

Для слайдера проектов (только настольная версия), все элементы списка находятся в относительном положении, имеют фиксированную ширину (26%) и float: left; А .cd-slide общая ширина будет правильно изменяться (с помощью JavaScript)., так что все элементы списка помещаются в одной строке:

В принципе, анимация была определена для каждого элемента видимого в списке .cd-slider (в общей сложности 6); Каждая анимация отличается в значении translateX установленного в 50% ключевого кадра.

Шаг 3. JS

На настольных устройств, мы меняем .cd-slider ширину, так что его <li> дочерние элементы остаются в той же строке; мы использовали  setSliderContainer () функцию, чтобы установить эту ширину; плюс, на изменение размера окна, мы обновляем .cd-slider перевести значение:

Кроме того, мы использовали JQuery для добавления / удаления классов (например,.projects-visible класс, когда пользователь нажимает кнопку действия) и реализации базовой навигации слайдера ( кнопки следующий / предыдущий с помощью клавиатуры).

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

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