Скролл-сайт из видео: как превратить ролик в управляемую историю

Скролл-сайт работает, когда видео уже несёт историю продукта. Прокрутка переводится в номер кадра, canvas показывает последовательность, а текст появляется в свободных зонах кадра. Такой формат подходит для продукта, портфолио, архитектуры и техники, где движение камеры добавляет смысл.

Сначала снимите технический паспорт ролика: длительность, разрешение, частоту кадров, резкие склейки. Затем посмотрите шесть контрольных кадров и ответьте: что главный объект, где для текста есть воздух, какие цвет и деталь могут стать частью интерфейса. Факты о продукте берите только из подтверждённых источников.

Сценарий состоит из 4–6 глав. Одна глава содержит одну мысль, короткий заголовок и одно-два предложения. Открытие оставьте видео и заголовку; в финале поставьте одно понятное действие. Для ролика до 5 секунд достаточно 60–80 кадров, для 5–15 секунд — 90–130. Подготовьте WebP отдельно для десктопа и мобильного; первый кадр и ближайшие главы загружаются первыми.

Проанализируй описание ролика: [описание]. Предложи 5 глав скролл-сайта.
Для каждой укажи диапазон кадров, главную мысль до 8 слов, текст до 180 знаков,
свободную зону для текста и факт, который нужно подтвердить источником.

Технический цикл: позиция скролла задаёт целевой кадр, плавное LERP-сглаживание догоняет его, а текст глав привязан к «сырому» прогрессу. Если кадр ещё не загружен, покажите ближайший доступный. Пользователю с prefers-reduced-motion нужна статичная постерная композиция.

Проверка проходит через локальный HTTP-сервер: первый, средний и последний экран на десктопе; первый и плотную главу на мобильном; медленная прокрутка; клавиатурный фокус; режим уменьшенной анимации. Отдельно проверьте общий вес кадров и контраст текста.

От видео к карте экранов

Допустим, у производителя есть 12-секундный ролик о новом кресле: сначала общий план, затем крупный план материала, регулировка механизма, финальный интерьер. Дизайнер не пишет текст поверх случайных кадров. Он отмечает на контрольном листе моменты, где объект смещается и появляется свободная зона. Из них собираются главы: «форма», «материал», «настройка», «место в интерьере», «действие». Фактические характеристики механизма подтверждает карточка производителя.

На 12 секунд разумно взять 90–130 кадров и высоту прокрутки порядка 600–750vh. Эти цифры — исходный ориентир: реальная плотность зависит от склеек и скорости движения. Если в ролике есть быстрый поворот камеры, рядом с ним не ставьте длинный текст. Если кадр статичен, можно дать читателю несколько дополнительных долей секунды через плавное замедление смены кадров у главы.

Содержание главы

Заголовок читается за один взгляд. Подзаголовок добавляет один доказуемый факт или поясняет выбор. Служебные подписи — номер главы, прогресс, материал — помогают ориентироваться, если они несут информацию. Модная декоративная типографика, которая спорит с фильмом, быстро превращает страницу в шум.

Вот шесть кадров и список подтверждённых фактов [вставить]. Разложи их на главы.
Для каждой предложи два варианта короткого заголовка, один текст до 160 знаков,
место размещения и причину, почему текст не закроет объект. Используй только
факты из списка; вопросы о недостающих данных вынеси отдельно.

Производительность и доступность

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

Canvas сам по себе недоступен как содержательный текст. Поэтому заголовки и ссылки оставляйте в семантической разметке, декоративные элементы скрывайте от скринридера, а фокус ссылок делайте видимым. Проверяйте тач-зоны на телефоне и контраст поверх каждого критичного кадра.

Ошибки, которые видно поздно

Частая ошибка — вытащить все кадры, положить их в папку и увидеть белый экран при первом скролле. Исправление: начать загрузку первого кадра сразу, ближайшие — в приоритете, а пока кадр не готов, оставить последний доступный. Ещё одна ошибка — привязать появление текста к сглаженному кадру: текст будет запаздывать. Для видимости используйте положение прокрутки, сглаживание оставьте самой картинке.

Третья ошибка — проверять страницу двойным кликом по HTML. Браузер может ограничить загрузку файлов. Поднимите локальный HTTP-сервер, пройдите путь с чистым кэшем и только затем передавайте ссылку на просмотр. Результат — понятная история, которую можно прочитать и на 390, и на 1440 пикселях.

Передайте разработчику карту поведения

В техническом задании опишите четыре состояния страницы: первоначальная загрузка, обычная прокрутка, отсутствие очередного кадра и уменьшенная анимация. Для каждого укажите, что человек видит и какое действие доступно. На первом экране полезны постер, заголовок и ссылка; ожидание тяжёлой последовательности должно сохранять смысл страницы.

Привязку к кадрам можно записать без привязки к конкретной библиотеке. Прогресс внутри секции изменяется от нуля до единицы. Умножаем его на число кадров минус один и округляем: получаем целевой индекс. При выходе за границы секции остаётся первый или последний кадр. Текст каждой главы получает собственный диапазон прогресса. Разработчик сможет отдельно настроить переход картинки и время чтения.

На телефоне проверьте кадрирование отдельно. Центральный объект может занимать большую часть горизонтального ролика, а в вертикальном окне его механизм или ручка окажутся за краем. Для мобильного варианта иногда нужен другой кроп или совсем другой постер. Решение принимайте после просмотра ключевых кадров в нужном соотношении сторон.

Посчитайте бюджет страницы до сборки

Допустим, после сжатия один кадр весит около 100 килобайт. Последовательность из 100 кадров даст примерно 10 мегабайт только на изображения. Это арифметический пример: фактический вес зависит от детализации, размера и качества. Добавьте шрифты, стили и остальные изображения, затем проверьте загрузку на ограниченной скорости.

Сравните три варианта: меньше кадров, меньшее разрешение и более сильное сжатие. Оцените на каждом плавность, читаемость мелких деталей товара и время до первого содержательного экрана. Иногда последовательность из 70 хорошо выбранных кадров воспринимается убедительнее, чем 120 тяжёлых изображений с пропусками при загрузке.

Закладывайте и стоимость поддержки. Если товар изменится, понадобится заменить исходный ролик, последовательность кадров и тексты. Сохраните соответствие «глава — диапазон — подтверждённая характеристика» рядом с материалами проекта. Оно позволит обновить страницу без повторного разбора всей истории.

Приёмка с позиции покупателя

Попросите человека пройти страницу и ответить на три вопроса: какой товар показан, чем он подходит для его задачи и куда нажать дальше. Затем повторите просмотр с выключенной анимацией. Смысл, характеристики и действие должны оставаться доступными в обоих вариантах.

Проверьте финальную ссылку, возврат к странице из другой вкладки и изменение ориентации телефона. Во время этих переходов пользователь должен сохранять доступ к тексту и управлению. Запишите найденные проблемы отдельно от пожеланий к красоте: это поможет сначала устранить помехи чтению и покупке.

Источник

• MDN: prefers-reduced-motion