Как сделать видео с прокруткой сайта

1. 1

   Вставьте ссылку

   Вставьте адрес в поле на главной странице и нажмите Enter. Мы открываем страницу в настоящем браузере, ждём шрифты и лениво загружаемые изображения и читаем её сверху донизу. С вашего экрана ничего не записывается.

2. 2

   Выберите устройство и формат

   «Десктоп» читает страницу в ширине десктопа и предлагает 16:9, 4:3 или 1:1. «Планшет» и «Телефон» читают её в своей ширине, поэтому сайт отдаёт настоящую адаптивную вёрстку, и предлагают 9:16, 4:5 или 1:1. Работаете по техническому заданию? Тогда введите точный размер.

3. 3

   Задайте длительность

   Длительность бывает от 2 до 90 секунд и заодно задаёт скорость прокрутки: одна и та же страница за шесть секунд — это тизер, а за тридцать — экскурсия.

4. 4

   Выберите движение

   «Плавное» мягко разгоняется и тормозит, «Скользящее» стартует бодро и по инерции доезжает до остановки, «Линейное» держит одну скорость, а «Импульс» спускается по странице по одной секции за раз. Поставьте воспроизведение на «Вниз и обратно», если видео должно зацикливаться без стыка.

5. 5

   Добавьте задержки, паузы и наведения

   Это необязательно, но именно здесь большая часть шлифовки. Задержите кадр в начале или в конце на срок до 10 секунд, остановитесь максимум на 6 секциях и наведите курсор на кнопки и карточки, чтобы сработали их hover-эффекты.

6. 6

   Посмотрите предпросмотр и экспортируйте

   Предпросмотр проигрывается в вашем браузере и ничего не стоит, сколько бы раз вы его ни пересматривали. Когда всё выглядит как надо, экспортируйте MP4, WebM или GIF. Точная стоимость в кредитах написана на кнопке «Экспорт» ещё до нажатия.

У большинства настроек редактора есть разумное значение по умолчанию. Вот те, на которые стоит взглянуть ещё раз.

Если страница длинная, а продаёт только её верхняя половина, перетащите ручки обрезки под предпросмотром, чтобы задать, где прокрутка начинается и заканчивается. Более короткая прокрутка при той же длительности получается медленнее и читается легче.

Длина стоит один кредит за каждые 2 секунды готового видео, а несколько настроек добавляют сверху фиксированную сумму: высокое разрешение, высокая частота кадров, Живая съёмка, ширина планшета или телефона, паузы и наведения. Экспорт длиной 10 секунд в 1080p и 60 fps, прочитанный в ширине десктопа, стоит 21 кредит, так что 51 кредита, которые вы получаете при регистрации, хватит на него дважды.

Дальше кредиты продаются наборами (5 $ за 100, 12 $ за 400 и 19 $ за 900) и никогда не сгорают. Подписки нет, и водяного знака нет ни на одном экспорте. Полная таблица — в разделе Как работают кредиты.

• Пропала анимация появления или секция выглядит пустой. Быстрый движок ведёт кадр по неподвижному изображению страницы, поэтому эффекты, срабатывающие при прокрутке, не проигрываются. Переключите движок на Живую съёмку или включите «Досматривать анимации», чтобы довести их до конечного состояния. Подробнее — в руководстве как снять анимации прокрутки.
• Проскочил cookie-баннер или кнопка чата. Оставьте включённым «Убирать cookie-баннеры и всплывающие окна», а всё, что пропущено, добавьте в «Скрыть элементы» как CSS-селектор. Подробнее — в руководстве как убрать всплывающие окна из записи.
• Страница показывает экран входа или ошибку. Она должна быть публичной. Войти за вас мы не можем, а некоторые сайты сразу отказывают автоматизированным браузерам.
• Мобильное видео похоже на сжатую десктопную страницу. Выберите устройство «Телефон», а не высокое соотношение сторон на «Десктопе», чтобы сайт отдал телефонную вёрстку. Смотрите как записать мобильную версию.