Пример поворота 3D-изображения при прокрутке. Как реализован поворот изображения и какая используется технология?

Question

[Юрий]

Здравствуйте (мой первый вопрос на хабр).

Есть промо-сайт https://www.mercurymarine.com/en/us/v12/. При пролистывании страницы вниз (scroll) происходит появление трёхмерных изображений с последующим вращением их.

Не понимаю как реализованы эти 3D-изображения. На полноценную трёхмерную модель - непохоже, на гифку вроде тоже.
Прошу дать направление для разгадки, объяснение, пример, мысль или еще что-нибудь.

Заранее благодарен ;)

-------------------------------------
Получается что все эти 3D-изображения являются набором плоских картинок (JPG).
Правильно ли я понимаю: в зависимости от местонахождения на странице появляется картинка с перемещением по оси Y?
Не сочтите за наглость, но если есть простенькие примеры - буду рад ознакомиться.

Comments

[RAX7]

https://spritespin.ginie.eu/

[Юрий]

RAX7, Спасибо. Понял, что на сайте куча плоских картинок.

Answer 1

[Sagrana]

Вариант с картинками называется анимация секвенции. Есть много примеров на codepen. Например вот

Answer 2

[Дима Паутов]

Все эти фичи - это набор видео роликов. Нужно быть умалишенным, что бы делать всё это через картинки))

Вот собсна парочка видосов из вашего примера:
https://www.mercurymarine.com/static/img/stingray/...
https://www.mercurymarine.com/static/img/stingray/...
https://www.mercurymarine.com/static/img/stingray/...
https://www.mercurymarine.com/static/img/stingray/...

Суть достаточно простая, видео ролику можно задавать время кадра, т.е. перематывать(вот эт я капитан).
От чего, мы можем благодаря html5 video api програмно указывать время, т.е. перематывать ролик программно. В данный момент, перемотка происходит на основе позиции скроллбара.

Comments

[Юрий]

Помимо видео там полно картинок:
https://www.mercurymarine.com/static/img/stingray/...
https://www.mercurymarine.com/static/img/stingray/...
https://www.mercurymarine.com/static/img/stingray/...

Поэтому я подумал о множестве jpg.

[Дима Паутов]

Юрий, я не сказал, что всё сделано через видео. Я сказал что суть в них, где-то может сделаны картиночные анимации, но в основном видео. + к видео нужны ещё постеры.

Answer 3

[Владимир]

Можно картинки, можно three.js, примеры у них на сайте посмотрите

Answer 4

[blablablablablabla]

Анимации через картинки. Вот про это: https://www.youtube.com/watch?v=R0ify3a7-3Q