Разработка и анализ образовательной платформы на Next.js
Требуется разобраться в кодовой базе двух проектов на Next.js: системы управления обучением (LMS) и блога. Необходимо изучить архитектуру, функционал и предоставить отчет.
Исправление анимации на сайте
В существующей реализации анимации в одном из блоков сайта обнаружена проблема с синхронизацией и временем запуска.
Проблемы для устранения
- Разная задержка появления элементов: Прямоугольник и заголовок отображаются сразу, а основной текст появляется с заметной задержкой. Проблема не связана с прямыми настройками задержки (delay) в коде.
- Некорректный запуск на мобильных устройствах: В макетах с одноколоночной структурой анимация должна запускаться только тогда, когда пользователь доскроллит до видимой области блока (принцип lazy-load для анимаций). В текущей версии она срабатывает заранее.
Требования к исправлению
- Устранить разрыв во времени появления элементов анимации. Все части блока (фон, заголовок, текст) должны появляться синхронно или с минимальной, незаметной глазу, последовательностью.
- Реализовать адаптивный запуск анимации: на одноколоночных макетах (мобильные устройства) анимация должна активироваться при попадании блока в область видимости viewport.
- Решение должно быть кроссбраузерным и стабильно работать на всех основных разрешениях экрана.
- Исправление должно быть выполнено аккуратно, без нарушения текущей вёрстки и функциональности сайта.
Ожидаемый результат
Плавная, синхронизированная анимация, которая корректно запускается в нужный момент на всех типах устройств.