Сайт с горизонтальной и вертикальной навигацией

Цена договорная • наличный расчёт, безналичный расчёт
18 февраля 2018, 12:00 • 2 отклика • 23 просмотра
Задача по сайту PresidentJet

Общее.
Запрограммировать сайт с горизонтальной и вертикальной навигацией с элементами анимации.
Дизайн и верстка страниц у нас есть, нужна именно логика смены, пролистывания и скролла страниц сайта, а также анимация движения элементов.

Вот макеты дизайна сайта:
Десктопная версия - http://letsflywith.me/FEEL/index.html
Мобильная версия - http://letsflywith.me/FEEL/phone/index.html

Детали.
Сайт работает как горизонтальный лендинг: т.е. по скролу вниз скролится направо.

На страницах есть кнопки “подробнее”, которые скролят текущую страницу вниз. Страниц по вертикали может быть несколько и на каждой свой контент.

У нас уже есть готовая верстка всех страниц, необходимо написать саму логику смены и скролла страниц как на макете дизайна со всей анимацией (двигающийся город на фоне, лого самолетика и т.д.)

Отдельные элементы анимации макета, если потребуется мы можем заанимировать сами.

Мобильная верстку одним css не решить и тоже требуется js.

Вот, например, мы взяли плагин https://revealjs.com для презентаций и попробовали реализовать макет http://www.divkit.com/pj/, но есть много нюансов, которые надо учитывать и непонятно, что проще: допиливать reveal.js или писать свою логику.

Из нюансов в reveal.js надо допиливать следующее:
  • Скорость смены слайдов (страниц) не регулируется. В revealjs есть только 3 режима скорости.
  • Контент слайдов исчезает при смене слайда (согласно макету фон с городом не должен исчезать)
  • На макете между некоторыми страницами есть слайды с небом, которые автоматически перелистываются, в revealjs это тоже необходимо учесть.
  • и т.д. и т.п.
Есть идея использовать https://impress.js.org