Верстка сайта потребовала написания множества уникальных скриптов (JavaScript, JQuery) для реализации взаимодействия интерфейса проекта с пользователем. На главной странице сайта ЖК "Спортивный квартал" мы видим полноэкранный масштабируемый слайдер с эффектом паралакс. Объекты слайдера реагируют на движения курсора пользователя – смена изображений заднего фона создает анимационный эффект, объекты спортсмена и мяча смещаются друг относительно друга, придавая сайту динамику.

Жилой комплекс «Спортивный квартал» состоит из корпусов. Каждый корпус - из секций (подъездов). Секция включает любое количество этажей. Все этажи и помещения являются жилыми и не предполагают коммерческого использования какими-либо организациями или юридическими лицами. На этаже может располагаться любое количество квартир. Квартиры могут быть свободными (доступными к продаже) или уже приобретенными. У каждого уровня сущностей Микрорайона (корпус, секция, этаж, квартира) есть свой набор данных, который хранится в инфоблоке (в базе данных сайта). На генеральном плане Комплекса пользователю предлагается выбрать интересующий его корпус. Открытые к продаже корпусы отмечены синими флажками, закрытые – красными. Для выбора корпуса нужно навести курсором мыши на нужное здание на изображении генерального плана. Если корпус открыт к продаже, его контур подсветится полупрозрачным белым слоем, и пользователь сможет перейти на страницу детального просмотра информации о корпусе простым кликом по подсвеченному слою. Перейдя на страницу корпуса, посетитель сайта увидит план корпуса, с возможностью выбора интересующей секции и этажа.

Когда пользователь наводит курсором мыши на этаж выбранной секции (номер секции выделен бежевой подсветкой над изображением здания), справа от здания появляется план активного этажа и информация о нем. Клик по этажу зафиксирует вывод информации об этаже. Информация об этаже включает вывод количества квартир в продаже, план этажа с отмеченными на нем проданными (их контур затемнен, помещение не реагирует не действия пользователя) и свободными квартирами. При наведении на плане этажа на квартиру со статусом «в продаже» ее контур подсвечивается полупрозрачным голубым слоем, а над планом этажа выводится краткая сводка по текущему помещению.

Клик по квартире предназначен для фиксации информации о ней. Выводится план помещения. Для каждой квартиры отображается информация о количестве комнат, общей площади, стоимости квартиры, цены за 1 кв.м. Есть возможность вернуться к просмотру плана этажа при помощи кнопки «Закрыть» справа от плана квартиры. План этажа и квартиры можно распечатать и сохранить в PDF.

В разделе «Расположение» представлен интересный функционал работы с картами. Для реализации поставленных задач пришлось работать с API Яндекс.Карт в связке с JavaScript и JQuery. Были решены следующие задачи: 1) работа с масштабом и зумом карты; 2) установка границ и заливки произвольной области на карте по ее географическим координатам; 3) прокладка маршрутов; 4) установка маркеров конкретных объектов на карте. Подробнее смотрите в Кейсе (ссылка наверху справа).