Global Export Company · демонстрация
Страница-проба: путь урожая от кадра до контракта. Сухофрукты и орехи выходят в кадр, раскладываются по корзинам, уходят в коробки и грузовики, разъезжаются по направлениям экспорта — и в финале засыпают экран, чтобы сложиться в название. Ни одной анимационной библиотеки — только CSS и один обработчик прокрутки.
Прокрутите вниз
Как это сделано
Всё, что происходит выше — девять актов от первого кадра до названия — собрано из приёмов, которые есть в любом браузере с 2020 года. Именно поэтому «сложная анимация» не утяжеляет и не замедляет сайт: браузер двигает уже готовые слои, а не перерисовывает страницу.
Экран удерживается на месте, пока страница прокручивается мимо, —
одно свойство position: sticky на блоке нужной высоты.
3 строки CSS
Положение страницы переводится в число от 0 до 1, и это число задаёт кадр анимации. Прокрутка вперёд и назад работает одинаково.
≈ 20 строк JS
Маршрут задаётся тремя точками — начало, изгиб, конец. Грузовик едет по кривой Безье и сам разворачивается по направлению: ни одного нарисованного кадра, только формула.
≈ 12 строк JS
Отъезд на общий план — одно преобразование на слое, в котором лежит вся сцена. Объекты о камере не знают и ничего не пересчитывают.
1 строка
Буквы закреплены на орехах с самого начала россыпи и едут вместе с ними. В конце двенадцать нужных поднимаются из общей массы и встают в строку — каждая летит к своей позиции, а не проявляется на месте.
≈ 15 строк JS
У каждого объекта своя «дальность»: дальние мельче, размытее и
отстают. Двигаются только transform и
opacity — свойства, которые считает видеокарта.
0 перерисовок
Блоки этого раздела проявились по мере приближения — это
IntersectionObserver, тот же приём, что и на макетах
концепций A и B.
≈ 10 строк JS
Если в системе включено «уменьшать движение», сцена показывает сразу финальный кадр. Это требование доступности, а не опция.
1 медиазапрос
Название в финале собрано из плодов с буквами — это те же вырезки, что летали в первом акте, просто у двенадцати из них есть своя буква.
Коробки, грузовики и карта маршрутов нарисованы, а не сфотографированы, и это осознанно: фотореалистичная фура рядом с вырезанной курагой читалась бы коллажем. После погрузки сцена честно превращается в схему логистики — и остаётся схемой до самого финала.
Отдельный вопрос — фотографии. Летящие ягоды и орехи вырезаны из собственных снимков компании с сайта globalex.uz: ничего не докупалось и не рисовалось. Для боевой версии те же кадры имеет смысл переснять на однородном фоне — вырезка станет чище, а файлы легче.