Создание оригинального шаблона портфолио

0
156

Свежий туториал по созданию красивого шаблона, который подойдёт для Landing Page или портфолио. В результате имеем шаблон портфолио с растягиваемыми проектами и полноэкранной навигацией.

Создаем страницу приземления

Демо Скачать шаблон

Создаем структуру

HTML структура шаблона состоит из 3 основных элементов: .cd-nav-trigger для иконки меню, nav.cd-primary-nav для панели навигации и контейнер .cd-projects-container для списка проектов порфтолио.

Каждый проект в портфолио содержит div.cd-title с заголовком проекта и div.cd-project-info с описанием проекта. Изображение проекта установлено с помощью свойства background и псевдокласса .cd-title::before.

Добавляем стили

Элемент div.cd-project-info имеет высоту height: 100%; и position: relative; Первые проект позиционирован абсолютно position: absolute;, имеет высоту height: 100%; и расположен над всеми проектами.

Второй и третий проект расположены вдоль оси Y, разделены на одну-треть и две-трети оболочки .cd-project-info по высоте. Таким образом, каждый проект заполняет одну-треть экрана.

Небольшая анимация, которая объясняет как расположены элементы :

Создаем страницу портфолио

Затем мы установили высоту 33.33% для заголовка .cd-title (1/3 высоты экрана) и высоту 300% к .cd-title::before (по отношению к высоте экрана).

Когда мы выбираем проект в портфолио используется класс .selected, который устанавливает translateY(0) к выбранному проекту, а остальные проекты опускаем на дно (translateY(100%)), таким образом проект раскрывается на весь экран.

Что касается .cd-project-info он имеет высоту height: 100%; и overflow: auto; (чтобы его можно было прокручивать) и находится в левом-верхнем углу своего .single-project родителя. Его псевдоэлемент ::before затем используется чтобы подтолкнуть div.content-wrapper под изображение.

Что касается полноэкранной навигации — .cd-primary-nav расположен ниже .cd-projects-container;, когда пользователь нажимает на .cd-nav-trigger, проекты опускаются вниз, а навигация поднимается вверх.

Обработка событий (Event handling)

Мы использовали jQuery чтобы обрабатывать события нажатия на .cd-nav-trigger и .single-project , а также чтобы добавлять или удалять классы.

ОСТАВЬТЕ ОТВЕТ

Пожалуйста оставьте комментарий!
Введите ваше имя