Магия проигрывания видео по скроллу в качестве анимации (как у Apple)
Работа с модификацией включает в себя микронастройки Zero Block, настройки блока ANX030 и правильную подготовку видео.
Настройки Zero Block
▪️ Добавьте элемент видео (или шейп, если вы используете модификацию "ANX011. Конструктор видео").
▪️ Базовая анимация: задайте фиксацию по скроллу (Fixing: on Window Top) и укажите необходимые настройки
▪️ Установите шейпы-триггеры (точки начала и конца проигрывания видео). Детальнее — в видеоинструкции.
Настройки модификации ANX030
▪️ Выберите Zero-элемент, в который встроено видео.
▪️ Укажите элементы-триггеры (которые вы задали в настройках Zero Block) начала и конца проигрывания видео.
▪️ Укажите элементы-триггеры (которые вы задали в настройках Zero Block) начала и конца проигрывания видео.
▪️ При необходимости укажите ширину экранов, на которых должна работать модификация (по умолчанию она включена для всех экранов).
▪️ Для большей плавности работы добавьте на страницу модификацию "ANX804. Плавный скролл страницы" (выберите Второй вариант — улучшенную версию).
Подготовка видео
▪️ Установите HandBrake (сервис бесплатный) — и загрузите файл с видео в формате mp4 (mpeg4).
▪️ Во вкладке "Сводка" поставьте галку в чекбоксе "Оптимизирован для Web"
▪️ В вкладке "Видео" поставьте значения:
– Частота кадров (FPS) 60
– Постоянная частота кадров
– Средний битрейт (кбит/сек) от 3000 до 5000 (чем выше битрейт, тем больший размер итогового файла)
– В "Дополнительных опциях" пропишите keyint=5 (или меньше 5). Это ключевые кадры — важный показатель для плавности отображения. Чем ниже значение, тем плавнее переходы.
– Постоянная частота кадров
– Средний битрейт (кбит/сек) от 3000 до 5000 (чем выше битрейт, тем больший размер итогового файла)
– В "Дополнительных опциях" пропишите keyint=5 (или меньше 5). Это ключевые кадры — важный показатель для плавности отображения. Чем ниже значение, тем плавнее переходы.
▪️ Нажмите кнопку "Начало" для финальной обработки видео.
Загрузите видео на хостинг
▪️ В идеале использовать отдельный хостинг, где файл никак не обрабатывается (не оптитмизируется) алгоритмами хостинга. Например, Selectel или Bunny CDN.
▪️Если у вас нет отдельного хостинга, можно загрузить видео на платформу Boomstream.
В данный момент мы не рекомендуем использовать для этой модификации сервис Kinescope, поскольку его алгоритмы оптимизации сокращают количество ключевых кадров и поэтому проигрывание видео будет прерывистым.