29 января 2017 г.

Интерактивная 3d Карта Торгового Центра

Концепция интерактивной 3d карты торгового центра с поиском в боковой панели и указателями для каждого этажа.

Сегодня мы хотели бы поделиться с вами небольшим 3d экспериментом. Идея его заключается в том, чтобы показать карту торгового центра со всеми этажами в перспективе. Кроме того, у нас есть поиск в боковой панели, что позволяет фильтровать отделы торгового центра. После того, как этаж выбран, мы видим увказатели для различных магазинов и мест. При нажатии на указатель, мы видим подробности этого места. В основном мы использовали для этого различные CSS свойства, такие как переходы, с помощью которых этажи будут перемещаться и добавляться путем добавления или удаления классов. Уровни представлены в виде встроенных SVG.

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

На самом деле, эта концепция может быть применена к любой карте с этажами; любому зданию, которое имеет несколько этажей.

Внимание: Для правильности работы данной концепции необходима поддержка 3D и единиц измерения Vmin.

Для фильтрации и упорядочения списка мест в боковой панели мы использовали List.js, это большая библиотека для добавления поиска, сортировки, фильтров и гибкости для таблиц, списков и различных HTML-элементов.

Ниже приводится первоначальный вид торгового центра:

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

Нажатие на булавку откроет детали этого места:

Tags : , ,

Комментариев нет:

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

Follow us

Follow.NOETIKOS

Contact Info

Как связаться с нами

Узнайте стоимость поддержки вашего проекта

Или заполните бриф на заказ услуг

Заполнить бриф
×