Полноэкранные скользящие панели для сайта
Наверное каждому разработчику хоть не раз, но приходилось принимать заказ на разработку портфолио, в котором обязательно должна быть полноэкранная галерея или подобный слайдер, но когда не хочется штамповать одинаковые сайты для всем, а создавать что-то новое и уникальное, тогда будет интересный данный урок, в котором мы рассмотрим как создать полноэкранные скользящие панели для сайта. Галерею можно изменить на свое усмотрение, придав ей уникальность смещения слайдов, и вариант ротации макетов.
Это весьма удобно, ведь при помощи легких изменений можно получить новый вариант макета панелей. Главная идея состоит в том, что при переходе по панелям мы будем анимировать некоторые разделительные полосы, а именно сетку, при этом корректируя размер панелей следующего слайда. Также у каждой панели будет определенный 3D эффект. Для достижения такого эффекта нам понадобятся плагин jQuery Transit и Modernizr.
Шаг 1. HTML
Для начала мы рассмотрим разметку. Для первого слайда, который будет является элементом списка, зададим четыре изображения. Data атрибуты data-w и data-h определяют ширину и высоту, которая вычисляется в процентах, первого изображения или элемента. Обратите внимание, что у нас есть до четырех элементов в каждом li, мы знаем ширину и высоту других панелей, зная значения первой.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<ul id="sg-panel-container"> <li data-w="60" data-h="55"> <img title="Grexit" src="/images/1.jpg" data-rotate-x="50" /> <img title="Godwottery" src="/images/2.jpg" data-rotate-y="-50" /> <img title="Somniloquent" src="/images/3.jpg" data-rotate-x="50" data-translate-z="-700" /> <img title="Etiquette" src="/images/4.jpg" data-translate-z="250" /> </li> <li data-w="50" data-h="100"> <img title="Somniloquent" src="/images/3.jpg" data-rotate-x="50" data-translate-z="-700" /> <div> <div class="sg-content"> <h3>Оглавление</h3> <p>Описание...</p> </div> </div> </li> <!-- ... --> </ul> |
Также мы добавляем 2 элемента, как во втором слайде. При этом параметры для ширины и высоты должны быть выбраны согласно требуемому расположению панелей. Следует обратить внимание, что во втором слайде мы зададим первому элементу, который является изображением, ширину 50% и высоту 100%.
Далее мы рассмотрим динамическую структуру, в котором каждое изображение или элемент будут в div с wrapper и с классом sg-box.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="sg-wrapper"> <div class="sg-box sg-box-1"> <div class="sg-panel"> <div style="background-image: url('/images/1.jpg');"> <h2>Grexit</h2> </div> </div> </div> <div class="sg-box sg-box-2" style="width: 40%; height: 55%; left: 60%; "> <!-- ... --> </div> <!-- ... --> </div> |
Также мы зададим заголовок изображения с параметром h2, при этом и само изображение будет использоваться в качестве фонового изображения внутреннего div c классом sg-panel. Дополнительно, у полей будет соответствующий стиль.
Шаг 2. jQuery
Теперь рассмотрим вызов самого плагина, данный фрагмент кода следует разместить в главном документе страницы, где находится сама разметка, при этом вызов плагина заключаем в теги <script></scritp>:
1 2 3 4 |
$(function() { $( '#sg-panel-container' ).gridgallery(); }); |
Следует обратить внимание, что для фоновых изображений будет присвоен параметр background-size: cover, который заставит их покрыть всю область в панели.
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 07.09.2012 в 18:01, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |