Процесс создания промо для Reactive Agency

Описание   Процесс
 
 

1) Прилипающее меню
В нём самом ничего особенного нет — катается себе наверху экрана, при открытии формы сверху пересчитывает координаты, но я заметил, что внизу оно начинает сливаться с фоном, потому решил добавить тень снизу.

2) Плавный скролл
Так как это одностраничник, навигация происходит по якорям на странице. Но браузеры не любят пользователей, потому переход к якорю по нажатию на ссылку резкий. Я его смягчил, теперь при нажатии на ссылку в меню, страница прокручивается до нужного места плавно. К тому же, при скролле станицы меню само отслеживает, где находится пользователь, и подсвечивает текущий раздел.

3) Плитка
Очень интересное поведение у блоков в разделе «О нас». Их 6, они стоят в ряд и не спрыгивают на следующую строку. Если экран маленький, то при наведении на область, близкую к краю экрана (во всём разделе) лента с блоками начинает плавно двигаться, пока блоки не закончатся, после чего она остановится.
Сами блоки же при нажатии переворачиваются :-)

4) Слайдеры
Решил себе усложнить/упростить жизнь и размять мозги — сделать один набор функций для всех поголовно слайдеров на странице. Пришлось написать пару дополнительных параметров (для слайдеров с кнопками, например), но зато кода меньше, и работает всё одинаково. Одинаково хорошо :-)
Что же до функционала, здесь всё стандартное: нажимаем на стрелочку — лента прокручивается на один пункт, нажимаем на кнопочку — лента прокручивается на нужное количество пунктов (как на apple.com), если крутить дальше некуда — кнопка блокируется.

5) Выдвигашки
Решил их назвать так. Это блоки с доп. контентом в разделе «Таргетинговая реклама». Если нажать на пункт в слайдере этого раздела (на весь пункт, а не только на ссылку), то «из-за» него вправо выдвинется блочок. Я заметил, что третья выдвигашка не будет видна, потому что уйдёт за края слайдера, потому сделал так, чтобы она выдвигалась не вправо, а влево.

6) Карта
Не то чтобы я не работал с картами яндекса, но менять отображение маркера и окошка с контентом мне пришлось впервые.

7) Разделы
Уже в конце работы появилась новая задача — сделать так, чтобы разделы занимали на больших экранах по высоте всё свободное место. Посидел, подумал, написал. Очень был себе благодарен, что функция определения координат якорей автономна, что ничего не пришлось переиначивать и подстраивать под новые условия.

8) По мелочи
Графику оптимизировал, всё, что было только можно, сделал на css3, анимации по мелочи — тоже на css, динозавров кормим пирогом и excanvas для переворачивания блоков.
Форму проверяю (все поля обязательны), хотел сделать красную подсветку незаполненных полей, однако смотрелось это некрасиво, потому взял цвет с кнопочки и поставил его.

В заключение хотел бы сказать, что такие проекты — это круто. Рутина надоедает, а тут приходится иногда поломать голову, чтобы сделать хороший продукт, это и доставляет удовольствие.