Yuri2021-04-05 23:19:59
Yuri, 2021-04-05 23:19:59

An example of rotating a 3D image while scrolling. How is image rotation implemented and what technology is used?

Hello (my first question on Habr).

There is a promo site https://www.mercurymarine.com/en/us/v12/ . When scrolling the page down (scroll), three-dimensional images appear with their subsequent rotation.

I don't understand how these 3D images are implemented. It doesn’t look like a full-fledged three-dimensional model, it seems like a gif too.
I ask you to give a direction for a solution, an explanation, an example, a thought or something else.

Thanks in advance ;)

It turns out that all these 3D images are a set flat pictures (JPG).
Do I understand correctly: depending on the location on the page, an image appears with movement along the Y axis?
Do not take it for impudence, but if there are simple examples, I will be glad to read it.

Answer the question

In order to leave comments, you need to log in

3 answer(s)
Sagrana, 2021-04-06

The option with pictures is called sequence animation. There are many examples on codepen. For example here

Dima Pautov, 2021-04-06

All these features are a set of video clips. You need to be crazy to do all this through pictures))
Here are a couple of videos from your example:
https://www.mercurymarine.com/ static/img/stingray/...
The essence is quite simple , you can set the frame time for a video clip, i.e. rewind (here I am the captain). From which, thanks to the html5 video api
, we can programmatically indicate the time, i.e. rewind the video programmatically. Currently, rewind is based on the position of the scrollbar.

Vladimir, 2021-04-06

You can have pictures, you can have three.js, look at the examples on their website

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question