Реализация эффекта скролла по видео для веб-страницы

  1. Биржа фриланса
  2. Веб-программирование
Открыт4 заявки36 просмотров

Создать JavaScript-модуль, позволяющий проигрывать видео по скроллу страницы (или по клику), имитируя эффект покадровой анимации (scroll-driven video). Скрипт должен быть универсальным и переиспользуемым: можно вставлять на разные страницы, либо в разные блоки одной страницы с разными видео.

🖼️ Исходные материалы:

  • Видео с дрона (будет предоставлено в формате .mp4).

  • Возможность заменить видео на другое без переписывания кода.

  • Возможность задать начало/конец проигрыша и количество кадров.

⚙️ Функциональные требования:

  1. Преобразование видео в кадры:

    • Скрипт или инструкция для автоматической нарезки видео на изображения (jpeg/png) с сохранением порядка (frame001.jpg, frame002.jpg, …).

    • Оптимальное количество кадров: 50–300 (в зависимости от длины видео).

    • Кадры сохраняются в отдельную папку и подключаются как спрайтовая последовательность.

  3. Отображение и скролл:

    • Отображается блок (div), в котором по скроллу (или клику) сменяются кадры.

    • Поддержка нескольких таких блоков на странице (по ID или классу).

    • Возможность задать скролл в обе стороны (вверх/вниз → назад/вперед).

    • Можно задать вручную: количество пикселей скролла на один кадр.

  5. Альтернатива: воспроизведение через <video>-элемент:

    • Поддержка встроенного видео (<video>) с фрейм-контролем через JS (если без нарезки).

    • Прогресс скролла → управление video.currentTime.

  7. Адаптивность и кроссбраузерность:

    • Скрипт должен корректно работать в Chrome, Safari, Firefox, Edge.

    • Адаптация под мобильные устройства (опционально: горизонтальный свайп).

  9. Установка и настройка:

    • Скрипт подключается через <script> или как отдельный модуль (желательно ES6).

    • В коде должна быть возможность легко задать:

      • путь к видео или кадрам;

      • количество кадров;

      • идентификатор блока (например, #droneScrollBlock);

      • диапазон скролла (startScroll, endScroll).

Оставляйте ваш телеграм

JavaScriptНаписание скриптовСоздание анимаций
2 дня назад
Тимур
 
31 год
14 лет в сервисе
Был
16 часов назад
120 отзывов

Заявки фрилансеров

Азиз
 
20 лет
2 года в сервисе
Был
час назад
день назад
Денис
 
22 года
9 месяцев в сервисе
Был
44 минуты назад
2 дня назад
Вадим
 
39 лет
11 дней в сервисе
Был
12 часов назад
2 дня назад
Андрей
 
36 лет
17 лет в сервисе
Был
2 часа назад
1 отзыв
2 дня назад