Как сделать эффект поворота-разворота при скролинге как на сайте?

Question

[Александр Леон-Булатов]

Доброго времени суток!

Как сделать такой же эффект у себя на сайте, какие технологии используются, как на сайту у коробки в центре (она крутится или возвращается при скролинге)?

Сам я уже и консоли и в коде посмотрел, но не нашёл при общем осмотре найти что это за зверь или javascript, но тогда где прямое указание "я отвечаю за эту анимацию" от скрипта ))

Ссылка на страницу с этим эффектом marcandfisa.com

Comments

[RAX7]

Плагин для jquery SpriteSpin
без плагина на js и canvas https://jsfiddle.net/RAX7/c4fLs5eo/

[Александр Леон-Булатов]

RAX7, спасибо.

Answer 1

[Ivan Bogachev]

0. Делим 360 градусов на N частей. Получаем N направлений.
1. Делаем по картинке с коробкой для кажного из направлений. Сохраняем по порядку.
2. Загружаем все картинки (по одной, или спрайт с ними) на клиента.
3. Выводим на канвас по одной картинке, выбирая их в зависимости от позиции скролла.

Альтернативно - то же самое, но вместо канваса меняем url у элемента img (именно так у них сделано).
Альтернативно - сообразить 3D модель коробки, текстуру и загуглить, как делать презентации товаров на Three.js.

Comments

[Александр Леон-Булатов]

Спасибо большое.

[Антон Р.]

Александр Булатов, а ты уверен что там картинки а не видео управляемое скроллингом? Если делать картинками поворот будет дерганным.

[Александр Леон-Булатов]

Антон Р., я не тестировал и проверял.

[IvanSafronov91]

Антон Р., там картинками