Верстка сайта потребовала написания множества уникальных скриптов (JavaScript, JQuery) для реализации взаимодействия интерфейса проекта с пользователем.
На главной странице сайта ЖК "Спортивный квартал" мы видим полноэкранный масштабируемый слайдер с эффектом паралакс. Объекты слайдера реагируют на движения курсора пользователя – смена изображений заднего фона создает анимационный эффект, объекты спортсмена и мяча смещаются друг относительно друга, придавая сайту динамику.
Генеральный план планировок
Жилой комплекс «Спортивный квартал» состоит из корпусов.
Каждый корпус - из секций (подъездов).
Секция включает любое количество этажей. Все этажи и помещения являются жилыми и не предполагают коммерческого использования какими-либо организациями или юридическими лицами.
На этаже может располагаться любое количество квартир. Квартиры могут быть свободными (доступными к продаже) или уже приобретенными.
У каждого уровня сущностей Микрорайона (корпус, секция, этаж, квартира) есть свой набор данных, который хранится в инфоблоке (в базе данных сайта).
На генеральном плане Комплекса пользователю предлагается выбрать интересующий его корпус.
Открытые к продаже корпусы отмечены синими флажками, закрытые – красными.
Для выбора корпуса нужно навести курсором мыши на нужное здание на изображении генерального плана. Если корпус открыт к продаже, его контур подсветится полупрозрачным белым слоем, и пользователь сможет перейти на страницу детального просмотра информации о корпусе простым кликом по подсвеченному слою. Перейдя на страницу корпуса, посетитель сайта увидит план корпуса, с возможностью выбора интересующей секции и этажа.
Когда пользователь наводит курсором мыши на этаж выбранной секции (номер секции выделен бежевой подсветкой над изображением здания), справа от здания появляется план активного этажа и информация о нем. Клик по этажу зафиксирует вывод информации об этаже.
Информация об этаже включает вывод количества квартир в продаже, план этажа с отмеченными на нем проданными (их контур затемнен, помещение не реагирует не действия пользователя) и свободными квартирами.
При наведении на плане этажа на квартиру со статусом «в продаже» ее контур подсвечивается полупрозрачным голубым слоем, а над планом этажа выводится краткая сводка по текущему помещению.
Планировки. Выбор квартиры
Клик по квартире предназначен для фиксации информации о ней.
Выводится план помещения.
Для каждой квартиры отображается информация о количестве комнат, общей площади, стоимости квартиры, цены за 1 кв.м.
Есть возможность вернуться к просмотру плана этажа при помощи кнопки «Закрыть» справа от плана квартиры.
План этажа и квартиры можно распечатать и сохранить в PDF.
В разделе «Расположение» представлен интересный функционал работы с картами.
Для реализации поставленных задач пришлось работать с API Яндекс.Карт в связке с JavaScript и JQuery. Были решены следующие задачи: 1) работа с масштабом и зумом карты; 2) установка границ и заливки произвольной области на карте по ее географическим координатам; 3) прокладка маршрутов; 4) установка маркеров конкретных объектов на карте.
Подробнее смотрите в Кейсе (ссылка наверху справа).