Hornwitser
49a329ac43
Implement a Viewport component and associated update script that allows rendering 3d content inside it. This is based on the implementation used at Furnavia for their 2025 website.
21 lines
792 B
JavaScript
21 lines
792 B
JavaScript
function setViewportOffset(viewport) {
|
|
// Calculate the distance from the top of the element to the center of the screen.
|
|
// This is an accurate rendering, but we might want to change it for artistic effects.
|
|
const windowHeight = window.innerHeight;
|
|
const rect = viewport.getBoundingClientRect();
|
|
if (rect.top > windowHeight || rect.bottom < 0) {
|
|
return;
|
|
}
|
|
const yOffset = windowHeight / 2 - rect.top;
|
|
viewport.style.setProperty('--y-offset', yOffset+"px");
|
|
}
|
|
|
|
const viewports = document.querySelectorAll(".viewport");
|
|
function updateViewports() {
|
|
for (const viewport of viewports) {
|
|
setViewportOffset(viewport);
|
|
}
|
|
}
|
|
window.addEventListener("scroll", updateViewports, { passive: true });
|
|
window.addEventListener("resize", updateViewports, { passive: true });
|
|
updateViewports();
|