Каталог

ANX030. Видео по скроллу

Zero Block Эффекты Видео
Магия проигрывания видео по скроллу в качестве анимации (как у Apple)
Работа с модификацией включает в себя микронастройки Zero Block, настройки блока ANX030 и правильную подготовку видео.

Настройки Zero Block

▪️ Добавьте элемент видео (или шейп, если вы используете модификацию "ANX011. Конструктор видео").

▪️ Базовая анимация: задайте фиксацию по скроллу (Fixing: on Window Top) и укажите необходимые настройки

▪️ Установите шейпы-триггеры (точки начала и конца проигрывания видео). Детальнее — в видеоинструкции.


Настройки модификации ANX030

▪️ Выберите Zero-элемент, в который встроено видео.

▪️ Укажите элементы-триггеры (которые вы задали в настройках Zero Block) начала и конца проигрывания видео.

▪️ При необходимости укажите ширину экранов, на которых должна работать модификация (по умолчанию она включена для всех экранов).

▪️ Для большей плавности работы добавьте на страницу модификацию "ANX804. Плавный скролл страницы" (выберите Второй вариант — улучшенную версию).


Подготовка видео

▪️ Установите HandBrake (сервис бесплатный) — и загрузите файл с видео в формате mp4 (mpeg4).
▪️ Во вкладке "Сводка" поставьте галку в чекбоксе "Оптимизирован для Web"

▪️ В вкладке "Видео" поставьте значения:
– Частота кадров (FPS) 60
– Постоянная частота кадров
– Средний битрейт (кбит/сек) от 3000 до 5000 (чем выше битрейт, тем больший размер итогового файла)
– В "Дополнительных опциях" пропишите keyint=5 (или меньше 5). Это ключевые кадры — важный показатель для плавности отображения. Чем ниже значение, тем плавнее переходы.


▪️ Нажмите кнопку "Начало" для финальной обработки видео.


Загрузите видео на хостинг

▪️ В идеале использовать отдельный хостинг, где файл никак не обрабатывается (не оптитмизируется) алгоритмами хостинга. Например, Selectel или Bunny CDN.
▪️Если у вас нет отдельного хостинга, можно загрузить видео на платформу Boomstream.
В данный момент мы не рекомендуем использовать для этой модификации сервис Kinescope, поскольку его алгоритмы оптимизации сокращают количество ключевых кадров и поэтому проигрывание видео будет прерывистым.