Сайт строительной корпорации «Альтстрой»

Задача: Cделать красивый и лаконичный имиджевый сайт строительной корпорации

Альстрой — строительная корпорация, осуществляющая капитальное строительство зданий различного назначения, технадзор, проектирование. Компания давно известна на рынке, имеет солидных заказчиков. Сайт для компании такого уровня не должен содержать большие объемы информации, его функции, в основном — презентационные. Краткость и емкость фраз, крупные и яркие образы. 

В этом проекте мы реализовали необычную структуру сайта — все его страницы, фактически, расположены на одной странице друг за другом. Переход по меню приводит к прокрутке страницы, а фон страницы изменяется с эффектом, который получил название «параллакс». При прокрутке страницы фоновое изображение сперва остается на месте, в то время как содержимое уходит за границы экрана. Затем, когда на краю экрана появляется фоновое изображение следующей страницы, оно как-бы выталкивает собой фон страницы предыдущей, занимая его место. Эффект можно увидеть непосредственно на сайте, либо посмотреть краткий видеоролик:

При прокрутке страницы на месте остаются некоторые элементы, в итоге они присутствуют на всех страницах — логотип компании и меню. В качестве фоновых изображений использованы фотографии стройплощадок и объектов Альстроя. Очевидно, что при реализации эффекта параллакс, фоновое изображение должно быть адаптировано под размер экрана. Для этого был написан отдельный программный модуль, а также подготовлены изображения различных размеров. 

Фактически, для такого сайта неуместно название «страницы», ведь страница всего одна. Более правильно — «кадры», которые прокручиваются, как на пленке.


Первый кадр (главная страница)

Прокрутку можно осуществлять как колесом мыши или скроллбаром, так и кликая по пунктам меню. Название пункта всплывает только при наведении курсора — чтобы не мешать основному содержанию кадра. 

Кадр раздела услуг содержит краткие тексты и фотогалереи. В нем расположены три блока по трем видам услуг. Блоки сворачиваются и разворачиваются по клику. 


Кадр раздела услуг

Возникает вопрос: если весь сайт — одна страница, то как быть с навигацией? Возможно ли по определенной ссылке перейти на нужную страницу сайта, точнее к нужному кадру? 
Конечно, это реализовано, иначе сайт не был бы полноценным интернет-ресурсом, а просто набором двигающихся картинок. Переход к любой странице производится с помощью так называемой «хэш-навигации». Во время прокрутке в адресной строке браузера меняется номер кадра после символа «#». Например, http://altstroy.com/#3 — адрес третьего кадра. Если перейти по этому адресу, открывшийся в окне браузера сайт сразу будет прокручен к нужной странице. Попробовать →

Таким образом создана полная аналогия с навигацией по страницам с помощью ссылок. 


Просмотр фотографий в полном размере

Следующий кадр — галерея объектов, в строительстве или реконструкции которых компания принимала участие. 


Кадр «Объекты»

Следующий кадр. Фоном для него послужило фото входной группы учебного корпуса Налоговой академии, выполненной Альтстроем. По клику на лицензию или ее название, она разворачивается поверх экрана в полном размере, подобно фотографии.


Кадр «Лицензии и сертификаты»

Кадр контактной информации. Он отличается от остальных тем, что здесь фоновое изображение — не фото объекта или стройплощадки, а ночное фото Москвы. Схема проезда является интегрированной интерактивной картой сервиса Яндекс-карт.


​Кадр контактной информации

×

Вы используете устаревший браузер Internet Explorer

Данный сайт создан с использованием современных технологий, не поддерживаемых Вашим устаревшим браузером. Поэтому некоторые элементы страниц могут отображаться некорректно, а некоторые функции сайта будут недоступны. Настоятельно рекомендуем загрузить и установить любой из следующих современных браузеров. Это бесплатно и займет всего несколько минут.