Прототип анимации при скролле — бутылка вращается, перемещается и меняет вкус. Прокрутите вниз.
ЛИМОН
01 / 03
Лимон
Классика с кислинкой. Бутылка выезжает и поворачивается этикеткой к вам.
↓ крутите вниз
Как это устроено
Этикетка натягивается на цилиндр прямо в браузере: каждый вертикальный столбик проецируется с учётом кривизны и светотени — поэтому поворот выглядит объёмным.
Положение, наклон, масштаб и угол поворота бутылки привязаны к прокрутке — анимация идёт ровно со скоростью пальца, назад тоже.
Только canvas и transform, без тяжёлых библиотек; кадр перерисовывается в requestAnimationFrame, 60 fps на телефоне.
Под реальный проект подключаются ваши материалы: рендер 3D-модели секвенцией кадров (WebP), PNG этикеток или Lottie — сценарий движения остаётся тем же.