Добрый день!
Ищу frontend-разработчика, который на одной странице сайта на Tilda развернул бы панораму krpano и добавил бы в неё визуализацию. Файлы панорам у меня есть, нужно именно запустить их на странице сайта и добавить визуализацию. Документация библиотеки:
krpano.com/docu/embedpano... Также отмечу, что chatGPT весьма эффективно пишет код для этой библиотеки, поэтому думаю, что с самой библиотекой проблем возникнуть не должно.
Что конкретно необходимо сделать:
1. Есть сайт, работающий на Tilda. Сайт пустой. Нужно, чтобы на одной из страниц сайта запускалась панорама библиотеки krpano.
2. Сейчас панорама работает так (запускается на локальном сервере, не на сайте):
Отображается сцена №1;
Клик по точке перемещения открывает сцену №2;
На сцене №2 присутствует изображение дома. Дом имеет несколько этажей;
Клик по изображению дома открывает картинку с планом этажа.
Целевой результат выглядит так:
Отображается сцена №1;
Клик по точке перемещения открывает сцену №2;
На сцене №2 присутствует изображение дома. При открытии сцены с помощью анимации выделяем цветными прямоугольниками этажи дома, давая понять пользователю, что каждый отдельный этаж кликабельный. Визуализация временная как только показали пользователю кликабельность этажей, её выключаем;
Если навести курсор на такой прямоугольник, то он подсвечивается. Клик по прямоугольнику открывает картинку с планом этажа. Картину с планом можно закрыть кликом по крестику;
Квартиры на плане этажа также подсвечиваются временной визуализацией как и этажи на доме, давая понять пользователю, что они кликабельны;
Если навести курсор на квартиру, то открывается небольшой поп-ап с с основными характеристиками квартиры. Внизу поп-апа кнопка, клик по которой открывает панораму квартиры;
Клик по кнопке панорамы квартиры открывает соответствующую панораму.
3. Чтобы пользователь знал в какой части панорамы находится, нужно отображать “хлебные крошки” вверху всех страниц. Т.е. там фиксируется в какие сцены проваливался пользователь. Если кликнуть по любой из “крошек”, то должна открыться соответствующая сцена.
4. Чтобы я мог разобраться в вашем коде, попрошу оставить как можно больше комментариев в нём что и как работает. В будущем хотел бы реализовывать описанный выше функционал самостоятельно.
5. Попрошу консультацию о том, как правильно и безопасно интегрировать получившиеся панорамы в другие сайты. Пока вижу два варианта: 1. отдельная страница с панорамами на сайте и 2. фрейм с панорамой, вставленный на уже существующую страницу сайта. Также хотелось бы понять ограничения производительности получившихся решений, максимальное количество сцен для быстрой работы сайта.
Для выполнения этой задачи с меня:
- доступы к Siteground и Tilda;
- файлы двух панорам:
Сцена 1 → Сцена 2. На Сцене 2 изображение дома. При клике на дом открывается план этажа, этот план можно закрыть нажатием на крестик;
Панорама квартиры, состоящая из двух сцен.