Lecaw

Учимся создавать Web-сайты

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

January 16, 2013
CSS
287hits

Сегодня я хочу рассказать Вам про еще один 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="#">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 -->

Для основной стены зададим такую ширину, чтобы внутри помещалось определенное количество изображений. По умолчанию количество изображений на стене - общее количество изображений, разделенное на четыре, так как у нас есть четыре стены. Мы также можем задать количество элементов на стене при помощи инициализации массива, как в демо:

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

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

Давайте посмотрим на некоторые скриншоты. После запуска css галереи, Вы увидите первые изображения, которые будут распологатся в окне просмотра. При большом размере экрана, мы сможем увидеть соседние изображения:

При щелчке по небольшому описанию, Вы увидите полно размерное изображение в нижней части:

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

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

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

Самой большой проблемой такого рода экспериментов является - поддержка 3D-transforms в различных браузерах и конечно производительность. При настройке width и perspective, не должно быть ошибок в просмотре, потому что элемент может быть повернут "прямо в лицо" :) Чем больше элементов по ширине, тем выше должно быть значение perspective(по крайней мере для Firefox).

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

Исходные файлыДЕМО

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(1 Голосовать)

Оставить комментарий