3D CSS галерея в виде комнаты

Сегодня я хочу рассказать Вам про еще один 3D-эксперимент: 3D CSS галерея в виде комнаты. Идея состоит в том, чтобы создать реалистичную выставку изображений с использованием CSS 3D transforms. Изображения будут развешаны вдоль стены, размер стены зависит от количества изображений. Как только дойдем до конца стены, плавно перейдем к следующей стене с другими изображениями. Чтобы добавить реальное ощущение пребывания в комнате, создадим четыре стены. У каждого изображения будет тег title в качестве описания, при нажатии по описанию, отображаем изображение в полном размере.

Сложность

Рекомендуем просматривать демонстрационные примеры в Google Chrome.

Мы используем следующую разметку, что бы добавить изображения в CSS галерею:

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

Затем преобразуем её в следующую структуру, которая будет иметь "комнату" с основной стеной:

<div id="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 -->

Установим размер стены, исходя от суммарной ширины изображений и разделим на 4, так как у нас есть четыре стены. Мы также можем задать количество элементов на стене при помощи массива, как в демо:

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

После того как мы дойдем до конца стены, добавим динамически еще одну стену и установим свойство transforms таким образом, как будто она находится справа от основной стены.

При большом размере экрана, мы сможем увидеть соседние изображения:

При щелчке по описанию, откроется изображение в полном размере:

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

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

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

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

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

ДЕМО СКАЧАТЬ

 

Перевод статьи 3D Image Gallery Room

Тэги: transformgallery

Вход

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