Кейс разработки
Scroll-сайты — кинематографичные лендинги, где видео разворачивается кадр за кадром по мере прокрутки (собственный движок)
О проекте
Конструктор кинематографичных «скролл-сайтов»: видео не проигрывается, а скрабится прокруткой — каждый кадр привязан к позиции скролла, поверх выводятся текстовые офферы по блокам. Собственный движок на canvas; на нём собран, например, сайт PANAEV (исходник 4K, ~3340 кадров, 9 блоков).
1. Задача
Нужен формат лендинга, который даёт «вау»-эффект и удерживает внимание на премиальном продукте:
- Видео, управляемое скроллом — пользователь сам «прокручивает» ролик.
- Текстовые офферы по блокам — синхронные с этапами видео.
- Переиспользуемый кит — один движок под разные сайты.
- Без тяжёлого фреймворка — быстрая загрузка, простой хостинг.
2. Архитектура решения
Vanilla-движок без фреймворка: canvas рисует нужный кадр видео по прогрессу прокрутки, scroll-jacking разбивает страницу на блоки-сцены.
| Параметр | Значение |
|---|---|
| Движок | Vanilla HTML + canvas (один файл), без React/фреймворка |
| Механика | Кадр видео по позиции скролла, scroll-jacking по блокам, WebGL-эффекты |
| Кадры | Видео → ffmpeg → последовательность .webp (в репозиторий не кладутся, регенерируются) |
| Контент | Офферы и тексты по блокам в конфиге сайта |
3. Главная инженерная сложность
Главное — плавный скраб тяжёлого 4K-видео по скроллу и точная привязка текстов к этапам ролика.
- Покадровый скраб — прогресс прокрутки маппится в номер кадра; canvas перерисовывает кадр без задержек.
- Пайплайн кадров — нарезка из исходного видео через ffmpeg с подбором сжатия под резкость и вес.
- Тексты по таймкодам — офферы появляются и затухают внутри своего блока.
Результат
Premium-лендинг с эффектом «оживающего» по скроллу видео: на примере PANAEV — 9 сюжетных блоков на основе 4K-ролика (~3340 кадров), собранных на переиспользуемом ките.
4. Эффект для бизнеса
- Сильное первое впечатление — кинематографичный формат выделяет бренд.
- Удержание — пользователь досматривает ролик, управляя им скроллом.
- Тиражируемость — один кит под множество сайтов.
5. Технологический стек — кратко
| Параметр | Значение |
|---|---|
| Движок | Vanilla HTML + canvas + WebGL |
| Обработка видео | ffmpeg (нарезка в .webp) |
| Хостинг | Статика (простой веб-сервер) |
Кейс подготовлен на основе технической архитектуры кита scroll-сайтов (группа 1SELLER). Описывается инженерное решение.