Есть эффект, который многие видели, но мало кто знает, как он сделан: крутишь страницу — камера летит сквозь изображение и оказывается в другом пространстве. В любой момент можно остановиться или прокрутить назад.
Многие думают, что это видео. Но на самом деле нет :)
Браузер не умеет надежно перематывать видео покадрово, особенно на телефоне. Будет дергаться и подвисать. Поэтому ролик режется на отдельные кадры: около 250 файлов на 15 сек. Дальше на странице делается высокая зона прокрутки, около 6 экранов. А внутри нее экран залипает на месте. Пока крутите, страница считает прогресс от 0 до 1 и по нему выбирает, какой кадр показать. Прокрутили треть — увидели кадр из первой трети, отмотали назад — вернулись обратно.
Отсюда и берется ощущение, которого обычное видео не даёт: движением управляете вы, а не наоборот
🟥 Кстати, в новом видео показываю, как собрать такой сайт с нуля: смотреть на YouTube (полезные материалы из видео — в комментах)
Всю эту механику мы не собираем руками каждый раз. Она разложена на 3 скилла:
1 скилл. Движение — разбирает референс по этапам, строит маршрут камеры и задания для генерации кадров. Важный нюанс: клип с монтажными склейками здесь не подойдет, его нельзя нормально отмотать назад.
2 скилл. Визуал — отвечает за композицию, картину, текст, цвета, шрифты и мобильную версию. Это адаптированный Scrollcraft (открытый скилл, который мы переделали под свою концепцию)
3 скилл. Код — связывает кадры со скроллом, настраивает загрузку, мобильную версию и плавность.
Смысл разделения в том, что ни один скилл не пытается быть универсальным. Каждый знает свою зону и знает, где начинается соседняя. Один огромный скилл на все превращается в кашу, из которой агент выбирает наугад.
Многие думают, что это видео. Но на самом деле нет :)
Браузер не умеет надежно перематывать видео покадрово, особенно на телефоне. Будет дергаться и подвисать. Поэтому ролик режется на отдельные кадры: около 250 файлов на 15 сек. Дальше на странице делается высокая зона прокрутки, около 6 экранов. А внутри нее экран залипает на месте. Пока крутите, страница считает прогресс от 0 до 1 и по нему выбирает, какой кадр показать. Прокрутили треть — увидели кадр из первой трети, отмотали назад — вернулись обратно.
Отсюда и берется ощущение, которого обычное видео не даёт: движением управляете вы, а не наоборот
3 нюанса, без которых все развалится:
• Хвост прокрутки. Последние 15% кадр не меняется — появляются заголовок и кнопка. Иначе финальный кадр промелькнет слишком быстро.
• Загрузка. Кадры подгружаются пачками, чтобы не отдавать сразу мегабайты. Если нужного ещё нет, показывается ближайший загруженный.
• Текст. Он привязан к прогрессу прокрутки, а не к таймеру. Поэтому при прокрутке назад все синхронно возвращается.
🟥 Кстати, в новом видео показываю, как собрать такой сайт с нуля: смотреть на YouTube (полезные материалы из видео — в комментах)
Всю эту механику мы не собираем руками каждый раз. Она разложена на 3 скилла:
1 скилл. Движение — разбирает референс по этапам, строит маршрут камеры и задания для генерации кадров. Важный нюанс: клип с монтажными склейками здесь не подойдет, его нельзя нормально отмотать назад.
2 скилл. Визуал — отвечает за композицию, картину, текст, цвета, шрифты и мобильную версию. Это адаптированный Scrollcraft (открытый скилл, который мы переделали под свою концепцию)
3 скилл. Код — связывает кадры со скроллом, настраивает загрузку, мобильную версию и плавность.
Смысл разделения в том, что ни один скилл не пытается быть универсальным. Каждый знает свою зону и знает, где начинается соседняя. Один огромный скилл на все превращается в кашу, из которой агент выбирает наугад.