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

Это весьма удобно, ведь при помощи легких изменений можно получить новый вариант макета панелей. Главная идея состоит в том, что при переходе по панелям мы будем анимировать некоторые разделительные полосы, а именно сетку, при этом корректируя размер панелей следующего слайда. Также у каждой панели будет определенный 3D эффект. Для достижения такого эффекта нам понадобятся плагин jQuery Transit и Modernizr.

Шаг 1. HTML

Для начала мы рассмотрим разметку. Для первого слайда, который будет является элементом списка, зададим четыре изображения. Data атрибуты data-w и data-h определяют ширину и высоту, которая вычисляется в процентах, первого изображения или элемента. Обратите внимание, что у нас есть до четырех элементов в каждом li, мы знаем ширину и высоту других панелей, зная значения первой.

Также мы добавляем 2 элемента, как во втором слайде. При этом параметры для ширины и высоты должны быть выбраны согласно требуемому расположению панелей. Следует обратить внимание, что во втором слайде мы зададим первому элементу, который является изображением, ширину 50% и  высоту 100%.

Далее мы рассмотрим динамическую структуру, в котором каждое изображение или элемент будут в div с  wrapper и с классом sg-box.

Также мы зададим заголовок изображения с параметром h2, при этом и само изображение будет использоваться в качестве фонового изображения внутреннего div c классом sg-panel. Дополнительно, у полей будет соответствующий стиль.

Шаг 2. jQuery

Теперь рассмотрим вызов самого плагина, данный фрагмент кода следует разместить в главном документе страницы, где находится сама разметка, при этом вызов плагина заключаем в теги <script></scritp>:

Следует обратить внимание, что для фоновых изображений будет присвоен параметр background-size: cover, который заставит их покрыть всю область в панели.

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

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

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