Интерактивная 3D карта

demosourse

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

Адаптивность данного примера обеспечивается инструментом vmin.

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

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

Первоначальный вид:

После выбора этажа:

Детализация этажа:

Надеемся, что данный пример будет вам полезен!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tympanus.net/codrops/2016/04/13/interactive-3d-mall-map/
Перевел: Станислав Протасевич
Урок создан: 19 Апреля 2016
Просмотров: 12480
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^