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

Адаптивный шаблон с 3d-панелью

Этот шаблон состоит со слайдов, что могут включать до четырех панелей. При переходе между ними мы будем анимировать разделяющие линии («сетку»), настраивая размер панелей следующего слайда. Таким образом будет создан 3D-Эффект, который будет определен для каждой панели. Также нужно обратить внимание, что данный шаблон будет работать только в браузерах, которые поддерживают новые свойства CSS. Он работает в последних версиях Safari, Chrome и Firefox (не очень гладко).

Демо   Скачать исходные файлы 

Были использованы некоторые  jQuery-плагины:

 jQuery Transit для большинства CSS-переходов

Modernizr  для проверки поддержания браузером CSS свойств

Также был использован текст Veggie ipsum.

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 определяют в процентах ширину и высоту первого изображения или элемента. Так как у нас в каждом li не больше четырех элементов, мы зная размер первого элемента, можем определить размер последующих изображений. Также мы можем добавить всего лишь два элемента, как во втором слайде. Значение ширины и высоты должны быть выбраны в зависимости от желаемого расположения панелей. В этом, втором слайде, первый элемент будет представлять собой картинку с размерами 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>

Каждое изображение, или элемент будет заключен в блок с классом sg-box. Название изображение будет помещено в  h2, а само изображение будет использоваться в качестве фонового изображения внутреннего блока с классом sg-panel. Кроме того, блоки будут иметь соответствующий стиль (ширина, высота, преобразования и переходы).  

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

Чтобы вызвать плагин, нужно просто вписать:

$(function(){

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

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

Демо    Скачать файлы

Автор: MARY LOU 

 3d-галерея изображений

Демо    Исходные файлы

Во второй части статьи будет еще один экспериментальный, но достаточно интересный урок — создание 3d комнаты-галереи. Идея будет заключаться в том, чтобы создать реалистичную галерею изображений, используя 3d-преобразования  CSS . Изображения будет «повешены» вдоль стены, которая будет иметь края. Когда мы подойдем к месту, где стена заканчивается, она повернется, и мы окажемся на другой части стены. Чтобы вызвать ощущение пребывания в реальной комнате, у нас будет четыре стены и угла. Возле каждого изображения будет висеть описание, при нажатие на которое будет появляться увеличенное описание снизу.

Обратите внимание, что этот шаблон — достаточно экспериментальный. Мы рекомендуем его для просмотра в Google Chrome.

Для добавления фигур и их описания мы будем использовать следующие структуры:

<div id="gr-gallery" class="gr-gallery">

    <div class="gr-main">

        <figure>
            <div><img src="images/11.jpg" alt="img01" /></div>
            <figcaption>
                <h2><span>Penn. Station, Madison Square Garden and Empire State Building</span></h2>
                <div><p>New York City, 2009, by <a href="http://www.flickr.com/photos/thomasclaveirole">Thomas Claveirole</a></p></div>
            </figcaption>
        </figure>

        <figure>
            <!-- -->
        </figure>

        <!-- -->
    </div>
</div>

Сначала мы будем превращать его в следующую структуру, которая будет содержать «комнату» и главную «стену»

<divid=«gr-gallery»class=«gr-gallery»>

 
    <div class="gr-main" style="display: none;">
        <!-- -->
    </div>

    <div class="gr-room">
        <div class="gr-wall-main">
            <div class="gr-floor" style="width: 3382px;"></div>
            <figure></figure>
            <figure></figure>
            <!-- -->
        </div>
    </div>

    <nav>
        <span class="gr-prev">prev</span>
        <span class="gr-next">next</span>
    </nav>

    <div class="gr-caption">
        <span class="gr-caption-close">x</span>
    </div>
</div><!-- /gr-gallery -->

Для основной стены будет задана ширина, которая будет позволять разместить внутри определенное количество фотографий. По умолчанию изображений должно быть столько, чтобы они смогли разместиться на четырех стенах. Мы также можем установить количество элементов на стене, объявив массив. Это вы можете увидеть в демо.

Gallery.init( {
    layout : [3,2,3,2]
} );

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

Давайте посмотрим на некоторые скриншоты. Наша галерея начинается с просмотра на первое изображение, которое будет сосредоточено в середине. Если монитор достаточно большой, то вы сможете увидеть кусочек следующего изображения.  

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

При нажатии на стрелку мы будем переходить к следующему или предыдущему изображению. Когда будет достигнут конец стены, мы увидим угол. 

Следующее изображение будет соответственно размещено на другой стене. 

Когда мы полностью сделали поворот, перед нами снова будет размещена только основная стена. 

Самая большая проблема для экспериментов такого рода — отображение 3d-преобразований в различный браузерах. При различных вариациях ширины, могут быть сбои в отображении. К сожалению, отображение страдает также при добавлении чего-то вроде  box shadow, поэтому в демо вы увидите только «голые» стены. Это может выглядеть намного некрасивым, но цель статьи — показать 3D-эффекты и гладкость переходов. 

Демо      Скачать исходные файлы 

Автор: MARY LOU

Перевод — Дежурка 

Возможно, вас также заинтересуют:

•  Цветовая палитра с помощью CSS3 & jQuery
• 10 полезных JS-сниппетов, которые помогут сэкономить время
• Создание меню на CSS
• Простые hover-эффекты для изображений при помощи CSS