如何打造旋转瓶效果？

Question

I just wanted to ask for an advice on how the effect with the rotating bottle on scroll is done so smooth on this website: https://takeboost.com/ Is this an svg file or is it frames that are loaded upon scroll?

Thank you in advance!

Answer 1

Using F12 > Network and refreshing the page, we can see 299 .jpg are loaded by JavaScript, these images are then drawn to a canvas when scrolling.

You can also use F12 > Network to find related JavaScript code:

1. Hover on the Initiator column of these image requests in F12 > Network
2. Click first clickable js link
3. Click "Pretty-print", the code to load these images will be highlighted.