Видео из сайта: как настроить автоматическую прокрутку

Откройте страницу, откройте DevTools (F12 или ⌥ ⌘ I на Mac), вставьте этот код в консоль (вкладка Console) и нажмите Enter. Скрипт ждёт три секунды, чтобы вы успели запустить запись, а затем прокручивает страницу сверху донизу по кривой с плавным разгоном и торможением за заданное время.

const SECONDS = 20;        // сколько длится прокрутка
const WAIT = 3;            // время, чтобы запустить запись

document.documentElement.style.scrollBehavior = 'auto';
window.scrollTo(0, 0);

const end = document.documentElement.scrollHeight - innerHeight;
const ease = (t) => (t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2);

setTimeout(() => {
  const start = performance.now();
  const step = (now) => {
    const t = Math.min(1, (now - start) / (SECONDS * 1000));
    window.scrollTo(0, end * ease(t));
    if (t < 1) requestAnimationFrame(step);
  };
  requestAnimationFrame(step);
}, WAIT * 1000);

• scrollBehavior = 'auto' здесь важен. Многие сайты задают scroll-behavior: smooth, и тогда каждый маленький сдвиг скрипта превращается в отдельную анимацию, а рывки сразу возвращаются.
• requestAnimationFrame сдвигает страницу один раз за каждый показанный кадр, поэтому прокрутка настолько ровная, насколько позволяет экран.
• Перед запуском один раз прокрутите страницу вручную до конца и обратно, чтобы лениво загружаемые изображения уже были на месте и высота страницы не поменялась посреди дубля.
• Сайты на библиотеках плавной прокрутки, таких как Lenis или Locomotive Scroll, управляют прокруткой сами и могут спорить со скриптом. Если страница дёргается рывками, причина в этом.

Со скриптом частота кадров всё равно остаётся на совести программы записи и вашего компьютера. Рендерер убирает и то и другое: Website Scroll Video один раз читает всю страницу, а затем рассчитывает, где она должна быть в каждом кадре видео с фиксированной частотой 24, 30 или 60 fps, так что тяжёлая страница не теряет кадры, а длинная не уплывает по времени. Вы задаёте то же, что и в скрипте, — секунды и кривую — и смотрите результат в предпросмотре, ничего не тратя.

Измерьте страницу в экранах: её полную высоту, делённую на высоту окна. Типичный лендинг занимает от пяти до восьми экранов. Дальше так:

Быстрее экрана в секунду — и текст размазывается, особенно при 30 fps или в GIF. Медленнее трёх — и внимание зрителя уплывает. Если одна секция важнее остальных, пауза на ней лучше, чем замедление всей страницы. В Website Scroll Video можно поставить до 6 пауз длиной от 0,5 до 5 секунд каждая.

• Плавное (ease-in-out). Трогается с места, идёт ровно, мягко останавливается. Правильный вариант по умолчанию: оба конца выглядят продуманными, а не обрубленными.
• Скользящее (ease-out). Стартует быстро и по инерции доезжает до остановки, как после резкого движения пальцами по тачпаду. Хорошо для коротких тизеров, которые должны начинаться энергично.
• Линейное. Одна скорость от начала до конца. Лучше всего для фонового цикла, где любая смена темпа притягивает взгляд.
• Импульс. Проходит секцию, замирает, движется снова. Выглядит так, будто кто-то листает сайт, и подходит для обзоров продукта.

Если видео прокручивается вниз, а потом резко возвращается наверх, на стыке цикла виден скачок. Вместо этого прокручивайте вниз и обратно вверх по той же кривой: последний кадр совпадёт с первым, и цикл будет бесшовным. В Website Scroll Video это режим воспроизведения «Вниз и обратно», при желании с остановкой внизу перед возвратом и наверху перед новым кругом.