Когда я пришёл на этот проект, у меня ещё молоко на губах не обсохло, а мне уже дали водку. Честно, увидев дизайн, я испытал огромный стресс. На тот момент самым креативным, что я делал, был прелоадер, где птичка ходила слева направо. Но я собрался, напряг все свои амбиции, каждый день овертаймил — и в итоге получился продукт, которым я горжусь до сих пор.
Очень быстро стало понятно, что за красивыми анимациями скрывается куча мелких технических задач.
Например, переход с самолётом. Если просто привязать его к скроллу, в какой-то момент становился виден ровный стык между белой и чёрной секциями. По задумке дизайнера пользователь вообще не должен был замечать этот переход — контент должен был буквально появляться из облаков.
Первой мыслью было просто перекрыть стык большим облаком, но тогда получалась длинная пауза, где на экране только белый фон и больше ничего. В итоге мы дорисовали облака прямо на стыке секций. Они скрыли переход и заодно сделали его гораздо интереснее.
Следующий экран с Москвой вообще стал одним из моих любимых в проекте. Очень понравился эффект, где все анимации привязаны к положению скролла. Когда всё начинает двигаться одновременно, экран ощущается не как набор отдельных анимаций, а как одна большая живая сцена.
Помню, ко мне подошёл директор и сказал примерно: «Сделай обычные анимации появления и не заморачивайся». Но мне очень хотелось довести этот экран именно до такого состояния.
Правда, именно после него Chrome начал сдаваться. По мере того как собиралась первая страница, FPS становилось всё меньше, пока вкладка в какой-то момент просто не умерла с Out of Memory. Забавно, что какое-то время меня неожиданно выручал Safari — он хоть и не летал, но позволял продолжать работу, пока я искал причину. В итоге оказалось, что многие SVG вообще не стоило инлайнить. После перевода их в отдельные файлы и производительность выросла, и браузерный кэш наконец начал работать на меня.
Со стороны кажется, что круг с бегущими надписями — совсем небольшая деталь. На практике времени на него ушло намного больше, чем я ожидал. Хотелось, чтобы всё двигалось абсолютно плавно и бесконечно, без ощущения, что анимация где-то начинается или заканчивается.
С бегущей строкой тоже пришлось повозиться. По задумке она должна была уходить за бутылку и продолжаться далеко за пределами самого блока. Просто обрезать её через overflow: hidden было нельзя — выглядело так, будто её просто отрубили.
Первым решением было добавить за бутылкой белый блок с градиентом, чтобы она красиво уходила за него. Но вместе с бутылкой этот блок начал перекрывать и саму бегущую строку.
Идею, как это обойти, подсказал наш бэкендер. Он предложил добавить ещё один слой, который работал только для строки. В итоге получилось именно то, что хотелось: бутылка уходила за градиент, а строка продолжала плавно исчезать, как будто всё так и было задумано с самого начала.
Когда проект уже вышел, команда подготовила большую статью на VC про процесс создания сайта. Там гораздо подробнее рассказано про исследования, концепцию и то, как вообще рождалась идея проекта.
Здесь я скорее собрал свои воспоминания как разработчик — то, что запомнилось мне спустя несколько лет.
Ознакомиться с процессом создания проекта можно по ссылке
