Адаптивный 3D макет из панелей на CSS и jQuery

В этой статье, мы покажем как создать адаптивный макет со слайдами. Каждая страница макета будет содержать до четырех панелей. При переходе по панелям мы анимируем разделительные рамки (сетку), корректируя размер панелей следующего слайда. У каждой панели будет определенный 3D эффект.

Сложность

Демонстрационный пример, будет работать в браузерах которые поддерживают новые свойства CSS. Мы протестировали в последних версиях Safari, Chrome, Мобильной Safari и Firefox.

Используемые jQuery плагины:

  • jQuery Transit
  • Modernizr

HTML структура:

<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>Proinde vos postulo</h3>
<p>Veggies sunt bona vobis, proinde...</p>
</div>
</div>
</li>
<!-- ... -->
</ul>

Первый слайд - небольшой список из четырех изображений. Атрибуты data-w и data-h определяют ширину и высоту (в процентах) первого изображения. Так как у нас может быть до четырех изображений, зная значение ширины и высоты первой панели, мы можем расcчитать это значение у оставшихся панелей. Значения ширины и высоты должны быть выбраны согласно расположению панелей. Во втором слайде мы зададим первому изображению, ширину 50% и  высоту 100%.

Для каждого изображения можно добавить data атрибут для эффекта перехода:

  • data-rotate-x
  • data-rotate-y
  • data-rotate-z
  • data-translate-x
  • data-translate-y
  • data-translate-z

Динамическая структура:

<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>

Каждое изображение будет находиться в контейнере с  wrapper и классом sg-box. Заголовок h2, само изображение будет фоновым изображением внутреннего контейнера c классом sg-panel. Также, у рамки будет соответствующий стиль.

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

Вызов плагина:

$(function() {
             
    $( '#sg-panel-container' ).gridgallery();
 
});

Перевод статьи Responsive 3D Panel Layout

Тэги: transition3D animatetransformmodernizr

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.