На создание шаблона о котором будем говорить вдохновил гайд dropbox.com/guide, который выполнен в стиле «раскола миров» 🙂

Сегодняшний самородок является простым шаблоном похожим, на удивление, на руководство по Dropbox. На устройствах с большим разрешением, содержание делится на два основных контейнера. Когда пользователь переходит по страницам, новый контент перекрывает старый. На мобильных устройствах простая галерея проектов со слайд панелью содержащей дополнительную информацию по проекту.

Демо Cкачать

2-blocks-template-featured

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

HTML структура состоит из двух списков, один (.cd-images-list) содержит изображения проекта ( выставлены как background-image для .cd-images-list > li), второй же содержит описание проекта, оба обернуты в два разных <div>. В добавок (ul.block-navigation) используется для создания навигации по проектам.

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

В мобильной версии, элемент .cd-content-block (содержит описание проекта) и он зафиксирован за областью просмотра (справа) что значит, что только видно изображение. Когда пользователь сделает тап/клик по одному из проектов, cd-content-block попадет в область просмотра (используя класс .is-visible), в то время как класс .is-selected присваивается элементу списка, содержащего информацию о выбранном проекте.

 Для устройств с разрешением экрана более 768px, оба .cd-image-block (контейнер изображения) и .cd-content-block (контейнер с описанием) имеют ширину: 50%, и высоту: 100%, а также overflow: hidden (для того что бы нельзя было про скролить на дочерние элементы).

 По умолчанию, оба .cd-image-block > ul > li и .cd-content-block > ul > li прижаты к правому краю  (translateX(100%)), таким образом, дочерние блоки не видны из-за родительских блоков.

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

 Обработка событий

Мы использовали jQuery для реализации навигации (предыдущей / следующей (клавиатура)) и для обнаружения событий клика по .cd-images-list > li > a (в мобильной версии), чтобы открыть слайд в панель.

Функция updateBlock() была определена для обновления видимого контента, и срабатывает как на мобильном так и в обычном варианте.

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

Демо Cкачать

Шаблон на два блока
Метки:    

Отключите, пожалуйста, AdBlock / uBlock. Поддержите наш проект! Сайт не переполнен рекламными блоками, поп-андерами и другими видами рекламы.