Анимируем фон при переключении экранов

[pavel-alpinweb]

---

🎓 Анимируем фон при переключении экранов

💥 https://htmlacademy-animation.github.io/2140263-magic-vacation-1/3/

[keksobot]

♻️ Я собрал ваш пулреквест. Посмотреть можно здесь.

[sfi0zy]

✏️ Первичная проверка.

Обозначения:

🔴 - Нужно обязательно исправить.
☝️ - Нужно принять к сведению, обращать внимание в перспективе.
💡 - Дополнительные мысли для саморазвития (за рамками учебных задач).
🔷 - Важное сообщение.

Чеклист:

• Плавный переход с экрана истории на экран призов - слайдер заливается однотонным фоном снизу вверх.
• Элементы слайдера не пропадают до того, как фоновый блок их накроет.

⌚ - Экран-накрывашка - это лишь малая часть более общей картины, как в плане ТЗ этого проекта, так и в плане того, зачем это вообще делается. Здесь мы имеем более комплексную, и, что важно, очень распространенную задачу, которая так или иначе затрагивает все, что происходит на экране. По идее здесь нужно бы сделать переходы между всеми экранами, чтобы весь сайт воспринимался как единое целое. Переход между двумя экранами с точки зрения дизайна не имеет смысла, мы всегда делаем переходы между всеми экранами. В целях дополнительной практики будет полезно этим озадачиться после выполнения остальных заданий по CSS, SVG и 2D-канвасу (там будет понятно, какие движения не вошли в задания и остаются для самостоятельной работы) или уже при подготовке к защите. Когда вы этим займетесь, обратите также внимание, что в видео-концепте есть анимации как появления, так и исчезания элементов интерфейса, разные при переходах между разными экранами, а в анимации смены экранов также присутствует изменение прозрачности контента и его масштабирование.

Комментарии:

💡 - Поскольку задача сделать плавные переходы довольно распространенная, будет полезно подумать о том, как строится логика таких переходов. Возможно вы уже работали с какими-то роутерами и все видели, но если нет, то подумайте, какие логические состояния есть у компонента "экран"? Сколько их? 1? 2? 4? Больше? Каков жизненный цикл экрана? Переход между экранами - это событие? Или может быть это растянутый во времени процесс с событиями начала и конца? Можем ли мы быть уверены в длительности этого процесса? А если экраны - это буквально разные страницы, которые подгружаются в процессе? Как стоило бы организовать модуль, который переключает экраны, чтобы можно было в явном виде связать состояния экранов и все наши анимации как появления, так и исчезания компонентов интерфейса?

💡 - По теме плавных переходов между экранами будет полезно дополнительно познакомиться с библиотекой Barba.js, если вы еще не знакомы. В учебном проекте все нужно делать без использования сторонних библиотек, но это популярный инструмент, про который стоит знать.

Итог:

✅ - Задание принято.