https://www.hotri.dk/Files/Templates/Designs/Swift/Assets/js/custom.js?638864704860000000

1document.addEventListener("DOMContentLoaded", function () {
2  const containers = document.querySelectorAll('.background-parallax');
3  const images = document.querySelectorAll('.parallax-image-safari');
4
5  function getVisibilityRatio(rect) {
6    const viewportHeight = window.innerHeight;
7    const visibleTop = Math.max(0, rect.top);
8    const visibleBottom = Math.min(viewportHeight, rect.bottom);
9    const visibleHeight = Math.max(0, visibleBottom - visibleTop);
10    return visibleHeight / rect.height;
11  }
12
13  function updateParallaxZIndexes() {
14    let maxVisible = 0;
15    let activeIndex = 0;
16
17    containers.forEach((container, i) => {
18      const rect = container.getBoundingClientRect();
19      const ratio = getVisibilityRatio(rect);
20
21      if (ratio > maxVisible) {
22        maxVisible = ratio;
23        activeIndex = i;
24      }
25
26      // Set opacity based on visibility ratio
27      images[i].style.opacity = ratio.toFixed(3); // smoother fade
28    });
29
30    // Set z-index so only the most visible gets -1
31    images.forEach((img, i) => {
32      img.style.zIndex = i === activeIndex ? '-1' : String(-2 - i);
33    });
34  }
35
36  window.addEventListener('scroll', updateParallaxZIndexes);
37  window.addEventListener('resize', updateParallaxZIndexes);
38  updateParallaxZIndexes();
39});