Задача – Анимация лендинга:
концепция анимации – вращение и повороты объектов анимации (рулон, аппликатор), технология спрайтовой анимации (JS+CSS), библиотека для реализации задуманного scrollmagic.io/
постранично сверстанный лендинг labelon.it-face.com/
Сценарий:
1. Рулон термоэтикетки стоящий на ребре (вид со стороны среза – "бублик"), при начале скролла вниз рулон начинает вращаться вдоль вертикальной оси (как монетка),
делает полтора оборота и останавливается узкой стороной к наблюдателю. Текст при этом, растворяясь, уходит вверх.
2. Вся анимация происходит в пределах одного окна, скролл управляет только анимацией объектов.
3. Рулон термоэтикетки вращаясь "заправляется" в аппликатор (переходом fade например), далее аппликатор уходит в угол экрана чтобы не загораживать текст
4. При дальнейшем проскролливании появляются различные виды применения термоэтикетки, при этом из аппликатора на них анимированно наносятся этикетки.
5. Появление всех элементов (текст, картинки, кнопки, фон) должно быть анимированно
Рулон отснят покадрово в двух плоскостях вращения и обтравлен в пнг с прозрачным фоном.
пример лендингов анимацией на которую нужно ориентироваться
исходники