Интерактивный спецпроект
Smart Шеф
Медийный спецпроект на площадке eda.ru: история о том, как готовить в стиле Food Car Culture и какие технологии помогают сохранять свежесть продуктов.
- Клиент
- Спецпроект для eda.ru
- Тип
- Сайты
- Год
- 2025
- Роль
- Фронтенд, Скролл-анимации, Оптимизация медиа
Задача
Спецпроект живёт ровно столько, сколько пользователь скроллит. Значит, каждая сцена должна удерживать внимание, а страница, не заикаться на середине из-за пары тяжёлых роликов.
Стек
- Next.js
- TypeScript
- GSAP ScrollTrigger
- Motion
- Video
Решение
- 1
Сценарий разложен на независимые сцены, привязанные к прогрессу скролла через ScrollTrigger. Каждая сцена знает свой диапазон и сама подчищает за собой обработчики.
- 2
Видео переведены в лёгкие форматы, стартуют только в зоне видимости, на мобильных заменяются статичными кадрами с плавным появлением.
- 3
Мелкая моторика интерфейса собрана на Motion: появления, параллакс, отзывчивые состояния. При включённом уменьшении движения сценарий превращается в спокойную вертикальную статью.
Результат
Проект читается как цельная история и держит плавный скролл, включая средние мобильные устройства.
- Формат
- Скроллителлинг
- Сцены
- Видео, текст, рецепты
- Площадка
- eda.ru
О проекте
Медийный спецпроект на площадке eda.ru, сделанный под рекламную кампанию с жёстким дедлайном. Формат такой, что пользователь либо проходит историю до конца, либо закрывает вкладку на втором экране. Поэтому вся работа шла вокруг темпа: сколько держится каждая сцена и что происходит на переходе между ними.
Что вошло в работу
- 1скроллителлинг из независимых сцен на ScrollTrigger
- 2подготовка и оптимизация видеоматериалов
- 3мобильная версия со статичными кадрами вместо видео
- 4спокойный вариант сценария для режима уменьшенного движения
- 5интеграция в существующую площадку заказчика
Экраны · 5
