Хореография прокрутки
Камера, световые проходы, смена цвета и переходы работают как части одной последовательности.
КИНЕМАТОГРАФИЧЕСКИЙ ВЕБ-ПРОЕКТ
LAST WIND
Интерактивный скролл-фильм: один странник, лунное поле и четыре непрерывные композиции, которыми управляет прокрутка.
НАПРАВЛЕНИЕКрасота
ФОРМАТКинематографический веб-проект
01 / КОНТЕКСТ
Задача
Превратить прокрутку страницы в управление небольшим фильмом. Вместо последовательности обычных секций — смена света, ракурса и атмосферы вокруг одного персонажа.
Композиция должна сохранять смысл на телефоне, при уменьшении движения в системе и в браузере без WebGL.
02 / РЕАЛИЗАЦИЯ
Как устроено
Three.js собирает многослойную сцену из оригинального сгенерированного изображения персонажа, травы, тумана, света и частиц. У ткани есть локальная деформация; персонаж — детальная иллюстрация, а не скелетная 3D-модель.
GSAP ScrollTrigger связывает прокрутку с камерой, затмением, цветом и типографикой. Шейдеры отвечают за движение ткани и окружения. Четыре композиции ведут от серебристой луны через бурю к спокойному полю.
Three.jsGLSLGSAPVite
03 / ВОЗМОЖНОСТИ
Что внутри
Живая среда
Ветер двигает траву и ткань, процедурный туман и частицы добавляют глубину.
Доступная неподвижная версия
При reduced motion, отключённом JavaScript или недоступном WebGL все четыре композиции остаются в обычном потоке страницы.
Работа на телефонах
Для небольших экранов меняются композиция и количество объектов. Рендеринг останавливается, когда сцена не видна.
04 / ТЕКУЩЕЕ СОСТОЯНИЕ
Статус проекта
Авторский скролл-фильм опубликован и доступен в браузере. Исходники, графика и устройство сцен находятся в репозитории field-form.