3D галерея картин для сайта с помощью jQuery RUDEBOXЕсли вы занимаетесь продажей картин, или просто хотите креативно украсить свое портфолио необычной галереей, тогда этот урок именно то, что вы искали, в данном уроке мы рассмотрим как создать замечательную трехмерную галерею для сайта с помощью трансформаций css и небольшого оживления с помощью jquery. Задумка состоит в том, чтобы заставить посетителя поверить в то, что он находится в картино-галереи, при этом нажимая на кнопки происходит плавный переход к другой стене галереи, это создает иллюзию путешествия по реальной галереи картин.

Следует заметить, что это просто эксперимент, и корректно будет работать только в браузерах поддерживающих  трансформации css3. И так, давайте приступим.

Шаг 1. HTML

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

Теперь нам необходимо превратить структуру с простой стены в комнату, делаем мы это следующим образом:

Как видите, все достаточно просто, идем дальше.

3D галерея картин для сайта с помощью jQuery RUDEBOX

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

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

Вот и все. Готово!

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

Читайте также: