@TkachevYuriy
Веб-разработчик

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

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

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

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

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

-------------------------------------
Получается что все эти 3D-изображения являются набором плоских картинок (JPG).
Правильно ли я понимаю: в зависимости от местонахождения на странице появляется картинка с перемещением по оси Y?
Не сочтите за наглость, но если есть простенькие примеры - буду рад ознакомиться.
  • Вопрос задан
  • 175 просмотров
Решения вопроса 1
sagrana
@sagrana
Вёрстка и немного кодинга)
Вариант с картинками называется анимация секвенции. Есть много примеров на codepen. Например вот
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
bootd
@bootd Куратор тега CSS
Гугли и ты откроешь врата знаний!
Все эти фичи - это набор видео роликов. Нужно быть умалишенным, что бы делать всё это через картинки))

Вот собсна парочка видосов из вашего примера:
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 програмно указывать время, т.е. перематывать ролик программно. В данный момент, перемотка происходит на основе позиции скроллбара.
Ответ написан
Можно картинки, можно three.js, примеры у них на сайте посмотрите
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы