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

Проявления, появления, параллакс и закреплённые секции срабатывают, только пока страница действительно прокручивается. Как снять их на видео и почему большинство инструментов, снимающих страницу целиком, их пропускают.

Aviral LakhanpaulОбновлено 30 октября 2026 г.Чтение: 3 мин

Коротко

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

Почему анимации пропадают

Большинство инструментов, превращающих ссылку в видео, работают в два шага: делают один очень высокий скриншот страницы, а потом ведут по нему кадр сверху вниз. Это быстро и идеально плавно, но скриншот — это один-единственный момент. Всё, что зависит от положения прокрутки, — заголовок, который проявляется при появлении в области просмотра, параллакс-изображение, секция, которая закрепляется и меняется, пока вы прокручиваете, счётчик, который набегает, — застывает в том состоянии, в каком был в этот момент.

В зависимости от того, как сделана страница, это состояние бывает одним из трёх:

Завершённым: выглядит нормально, но статично.
Не начавшимся: на месте секций остаются пустые провалы, потому что элементы, ждущие своего появления, всё ещё невидимы.
Промежуточным: элемент пойман посреди проявления или сдвига и выглядит сломанным.

Какие есть варианты

Способы снять анимации прокрутки
Подход	Анимации	Прокрутка	Скорость
Сдвиг по неподвижному снимку, появления доведены до конца	Показаны в конечном состоянии	Рассчитана, идеально ровная	Быстро
Живая съёмка в каждом положении прокрутки	Проигрываются так, как их видит посетитель	Рассчитана, с фиксированной частотой кадров	Заметно медленнее
Запись экрана с прокручивающим скриптом	Проигрываются в реальном времени	Настолько ровная, насколько позволяет компьютер	В реальном времени плюс монтаж

Быстрый путь: сначала досмотреть анимации

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

Точный путь: снимать вживую

Когда главное — движение, как в большинстве шаблонов Framer и Webflow, на сайтах агентств и в запусках продуктов, переключите движок на Живую съёмку. Вместо того чтобы вести кадр по одному изображению, она прокручивает настоящий браузер в каждое положение и делает снимок там, поэтому появления, параллакс, закреплённые секции и трансформации, привязанные к прокрутке, проигрываются в видео ровно так, как на странице.

Прокрутка по-прежнему рассчитывается, поэтому она такая же ровная, как у Статичного сдвига, и держит фиксированные 24, 30 или 60 fps.
Паузы, наведения, рамки и фоны работают с ней точно так же, как со Статичным сдвигом.
Она держит открытым настоящий браузер на всю длину видео, поэтому рендерится заметно медленнее и добавляет к экспорту 13 кредитов. Она доступна на любом аккаунте с первого экспорта, и никакой тариф для неё открывать не нужно.

Если записываете сами

Страницу, до которой рендерер не может добраться, запишите с экрана, пока её прокручивает скрипт. Сам скрипт есть в руководстве по автопрокрутке. Следите за двумя вещами:

Сайты на библиотеках плавной прокрутки, таких как Lenis или Locomotive Scroll, часто запускают анимации от библиотеки, а не от прокрутки браузера. Скрипт, который вызывает window.scrollTo, может проскочить их. Прокручивайте так, как ожидает сайт, или записывайте с выключенной библиотекой и смиритесь с разницей.
Страницы с обилием анимаций чаще всего теряют кадры при записи. Закройте всё остальное, записывайте в 60 fps, а если дубль всё равно дёргается, загляните в руководство как убрать рывки в записи прокрутки.

Попробуйте на своём сайте

Вставьте ссылку и бесплатно посмотрите прокрутку в предпросмотре. Бесплатных кредитов при регистрации: 51. Карта не нужна, а на экспортах нет водяного знака.

Вопросы
и ответы

Коротко о том, что обычно спрашивают дальше.

Контакты

Почему в моём видео с прокруткой сайта пустые секции?

Это элементы, которые ждали анимации появления при прокрутке, а она так и не сработала, потому что инструмент снял неподвижное изображение страницы. Доведите анимации до конца перед съёмкой или используйте движок живой съёмки, который прокручивает настоящую страницу.

Можно ли записать эффекты параллакса?

Да, способом, который действительно прокручивает страницу: записью экрана, которой управляет скрипт, или рендерером, снимающим страницу в каждом положении прокрутки, например Живой съёмкой в Website Scroll Video.

Стоит ли Живая съёмка дополнительно?

Она добавляет к экспорту 13 кредитов, потому что всю длину видео держит запущенным настоящий браузер. Во всём остальном цена та же.

Меньше времени на запись. Больше — на созидание.

Автоматизируйте запись сайтов: настраиваемое движение, умные регуляторы и параметры экспорта, сделанные для современных авторов.

Попробовать