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

Сергей13 років у сервісі
Дані замовника будуть вам доступні після подання заявки
02.05.2019

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

Наш проект должен быть по атмосфере похож на 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

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

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

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

Спасибо!

JavaScript