4 ms·
Would anyone know the general steps to making an interactive webpage like this? I tried to take a peek by opening the Web Inspector and scrolling to see what ch
by jyunwai 3y ago
Would anyone know the general steps to making an interactive webpage like this? I tried to take a peek by opening the Web Inspector and scrolling to see what changed, but couldn't uncover anything definitive.
The general technique I can identify is that the webpage uses an approach called "scrollytelling" (also noted by the references to "scrolly" from the Web Inspector) to make the animation advance in reaction to the user scrolling down.
For the pictured objects, I assume that an animation team (likely a bit separate from the web development team) created the assets. But I wonder how the developers then made sure that each provided asset enlarged at the proper rate as the user scrolled down (and also made sure that the scaling worked properly upon changing the width of the window).
- thorncorona 3y agohttps://pudding.cool/process/how-to-implement-scrollytelling/ https://pudding.cool/process/how-to-implement-scrollytelling...
- samlearner 3y agoWe're not scrubbing over a pre-rendered animation here. We're using a library called threejs (a WebGL wrapper) in the background figure and adjusting the camera/models in response to scroll position (within a react environment)
- jyunwai 3y agoThat is excellent, thanks for the information and work to produce a very nice feature.