The canvas is given a z-index less than the other html elements of the page (such as this text) so that it appears behind them.
The canvas given fixed positioning so that when the user scrolls, the canvas stays in one place.
On the body, I set overscroll-behavior-y to none so that there's no bounce at the end of scroll. This may not be supported well across all browsers, yet.
Another div is given floating positioning - this "floating-info" element is used for debug text. It has its innerText set by our scroll handler to animation variables we're using in our three.js scene. Better than console.logging, sometimes.
An event handler (function) is set on document.body.onscroll.
This function is called whenever a scroll event happens.
The function looks at the relative position of the top of the body element, let's call it t. (t starts at zero, goes increasingly negative as we scroll)
You can see the value of t in the floating info debug text.
This value, t, is used to compute various properties of the objects in the scene - the rotations of the spinning cube, and its position on the x axis.
Actually, that's a lie - in most cases, t is not directly used. Instead of setting the property directly from t, we set a desired value for the property and then, each frame, animate (lerp) the property some fraction of the way towards its desired value.
This ensures that the animation happens smoothly and doesn't jerk to a halt just because scroll events suddenly cease.
Up? We can animate what the camera looks at, too.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quasi amet dignissimos autem et nemo pariatur. Temporibus, deleniti sit suscipit, neque incidunt porro molestiae odit ut reiciendis sapiente impedit cupiditate?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quasi amet dignissimos autem et nemo pariatur. Temporibus, deleniti sit suscipit, neque incidunt porro molestiae odit ut reiciendis sapiente impedit cupiditate?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quasi amet dignissimos autem et nemo pariatur. Temporibus, deleniti sit suscipit, neque incidunt porro molestiae odit ut reiciendis sapiente impedit cupiditate?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quasi amet dignissimos autem et nemo pariatur. Temporibus, deleniti sit suscipit, neque incidunt porro molestiae odit ut reiciendis sapiente impedit cupiditate?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quasi amet dignissimos autem et nemo pariatur. Temporibus, deleniti sit suscipit, neque incidunt porro molestiae odit ut reiciendis sapiente impedit cupiditate?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quasi amet dignissimos autem et nemo pariatur. Temporibus, deleniti sit suscipit, neque incidunt porro molestiae odit ut reiciendis sapiente impedit cupiditate?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quasi amet dignissimos autem et nemo pariatur. Temporibus, deleniti sit suscipit, neque incidunt porro molestiae odit ut reiciendis sapiente impedit cupiditate?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quasi amet dignissimos autem et nemo pariatur. Temporibus, deleniti sit suscipit, neque incidunt porro molestiae odit ut reiciendis sapiente impedit cupiditate?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quasi amet dignissimos autem et nemo pariatur. Temporibus, deleniti sit suscipit, neque incidunt porro molestiae odit ut reiciendis sapiente impedit cupiditate?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quasi amet dignissimos autem et nemo pariatur. Temporibus, deleniti sit suscipit, neque incidunt porro molestiae odit ut reiciendis sapiente impedit cupiditate?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quasi amet dignissimos autem et nemo pariatur. Temporibus, deleniti sit suscipit, neque incidunt porro molestiae odit ut reiciendis sapiente impedit cupiditate?