Home > Mobile >  How to create the rotating bottle effect?
How to create the rotating bottle effect?

Time:02-05

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!

CodePudding user response:

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.
  •  Tags:  
  • Related