—»     —»   Эксперимент: 3D галерея изображений
  Раздел: Анимация   Комментариев: 2  

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



Сегодня мы хотим поделиться с вами еще одним экспериментом: комнатой галереи в 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).

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

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

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: 3D
Опубликовал Design FactoRy   Прочитано (раз): 5243   |   Оставлено комментариев: 2
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 26 января 2013 @ 00:33
Написал: krapan88 — группа: Читатели  
На сайте с: 31.01.2010   |   Публикаций: 0   |   Комментариев: 59
ICQ: --- не указано ---
странно, но на демо нет никакого вращения. Элементы просто передвигаются как в обычном слайдере в одной плоскости. Браузер Хром Версия 24.0.1312.56 m Win8 x64
Комментарий #2: 26 января 2013 @ 12:56
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
krapan88, Браузер Хром Версия 24.0.1312.52 m Win7 x64 - вращение наблюдаю :)
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930