Главная > Анимация > Эксперимент: 3D галерея изображений

Эксперимент: 3D галерея изображений


25 января 2013, 15:00. Разместил: Design FactoRy
Сегодня мы хотим поделиться с вами еще одним экспериментом: комнатой галереи в 3D. Идея заключалась в том, чтобы создать реалистичную среду для экспозиции изображений при помощи CSS 3D-трансформаций. Изображения «развешаны» на стене, у которой будет окончание. Как только вы достигаете окончания стены, происходит вращение и перенаправление к следующей стене с изображениями. Чтобы придать этой комнате реалистичный вид, у нас будет всего 4 стены и углы. Каждое изображение будет иметь небольшое описание с маленьким шрифтом, при нажатии по которому будет появляться увеличенная версия.

Эксперимент: 3D галерея изображений

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

Мы рекомендуем вам посмотреть демо в 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>

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

<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, так как у нас всего 4 стены. Мы также можем выставить число элементов на стену за счет инициализации массива шаблона, как это можно наблюдать в демо:

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

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

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

Эксперимент: 3D галерея изображений

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

Эксперимент: 3D галерея изображений

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

Эксперимент: 3D галерея изображений

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

Эксперимент: 3D галерея изображений

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

Эксперимент: 3D галерея изображений

Самая большая проблема в такого рода экспериментах заключается в том, что разные браузеры по-разному работают с 3D-трансформациями. Если использовать критические значения ширины и перспективы, то при просмотре могут возникнуть некоторые проблемы, так как элемент может повернуться «прямо вам в лицо»! Чем больше элемент в ширину, тем больше будет значение перспективы (по крайней мере, так происходит в Firefox).

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

В любом случае, мы надеемся, что вам понравился наш маленький эксперимент!

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.

Вернуться назад