22 lines
792 B
JavaScript
22 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();
|