Интерактивная 3D карта
Сегодня мы бы хотели продемонстрировать вам небольшой эксперимент. Идея заключается в отображении пользователю интерактивной 3D-карты. Вдобавок мы прикрутили форму поиска по областям молла. При выборе этажа пользователю раскроются элементы выбора магазинов. Сами элементы карты представлены в формате SVG.
Адаптивность данного примера обеспечивается инструментом vmin.
Данный пример можно взять за основу для любой карты с различными областями.
Для фильтрации различных элементов мы воспользовались инструментом List.js, который позволяет сортировать таблицы, списки и другие HTML элементы.
Первоначальный вид:
После выбора этажа:
Детализация этажа:
Надеемся, что данный пример будет вам полезен!
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tympanus.net/codrops/2016/04/13/interactive-3d-mall-map/
Перевел: Станислав Протасевич
Урок создан: 19 Апреля 2016
Просмотров: 12480
Правила перепечатки
5 последних уроков рубрики "CSS"
-
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
-
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
-
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
-
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
-
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.
