Вёрстка + эффекты (js анимация)

Необходимо сверстать шаблон сайта.

Наш проект должен быть по атмосфере похож на https://www.roninamsterdam.com/.

• сайт должен загружаться максимально быстро!
• пользователь должен ощущать себя в одном пространстве, в одной среде!
• Т.е. использовать затухание easy-in / easy-out (эффект начинается медленно затем ускоряется и завершается тоже замедляясь).

  Вся навигация и переходы между страницами должна осуществляться через custom downloader, который есть в дизайне.

  При загрузке страницы использовать цифры, а при загрузке части страницы просто идикацию без процентов.

• В коде должны быть коментарии на англ. языке и разделение эффектов и блоков страницы
• шрифты и их размеры, отступы в макете XD
• при экспорте использовать SVG  (в случае невозможности использовать векторный формат - сообщите об этом)
• оптимизировать адаптивность для всех устройств

основные требования почти безкомпромисно, иначе не добьемся ожидаемого

результата!

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

Главная страница:

• появление страницы с эфектом выцветания из черного (1,5-2 сек, но оставить возможность настраивать эффект).
• подключить кастомные курсоры из дизайна
• при пермезении курсора, должен быть параллакс эффект (смещаем текст и заголовок относительно друг друга)
• также при перемезении курсора только на главной странице и первом экране

  сделать эффект виньетирования вокруг курсора. Я прилагаю видео пример

  (схематично там показано как надо)

• Навигация происходит прокручивая экран колесиком  мышки (или используя колесико в дизайне)

ровно на один viewport без промежуточных положений.

• логотип и бургер всегда зафиксированы вверху экрана
• аниамция колесика счетчика слайдов
• параллакс элементов на каждом слайде (референс https://www.roninamsterdam.com/ страница ABOUT)

• содержит фильтр
• проекты

• в дизайне

• меню как popup
• заблюрить задний фон
• выбор пункта меню как на видео (но прямоугонльник должен подгоняться под каждый пункт меню)
• использовать easy in / easy out

макет в XD https://we.tl/b-XGRipKxkky

примерная анимация https://we.tl/b-T6NDrazowF

По всем вопросам или возникшим сложностям сразу пишите мне!

telegram, skype, vyber, whatsapp

Благодарю за то что дочитали до конца задание.

Я рассматриваю предложения только от тех, кто прочитал задание до конца.

Поэтому напишите в своем предложении фразу: "Я прочитал!"

Спасибо!