https://betterproposals.io/js/home-statement-scroll.js?v=1.1

1window.addEventListener('scroll', function() {
2    const wrapper = document.querySelector('.color-on-scroll'); // Select the wrapper element
3    const words = document.querySelectorAll('.color-on-scroll p span'); // Select all span elements inside the wrapper
4    
5    // Get the bounding box of the wrapper relative to the viewport
6    const wrapperRect = wrapper.getBoundingClientRect();
7    
8    // Define how much of the wrapper needs to be visible for the effect to start
9    const scrollStart = wrapperRect.top; // Top of the wrapper relative to viewport
10    const scrollEnd = wrapperRect.bottom; // Bottom of the wrapper relative to viewport
11    
12    // Distance between scroll points for each word change (can adjust based on wrapper size)
13    const scrollStep = (scrollEnd - scrollStart) / (words.length * 0.5);
14  
15    words.forEach((word, index) => {
16      // Calculate the scroll point for each word based on the wrapper's position
17      const wordScrollPoint = scrollStart + (index * scrollStep);
18  
19      // Check if the wrapper is in view and apply the opacity change
20      if (wrapperRect.top < window.innerHeight && wrapperRect.bottom > 0) {
21        if (window.scrollY > wordScrollPoint + 300) {
22          word.style.opacity = '1'; // Fade in the word as it's scrolled into view
23        } else {
24          word.style.opacity = '0.4'; // Revert opacity when out of view
25        }
26      }
27    });
28  });
29