Since there’s no preview link for me to demonstrate, I’ll just try to explain verbally. If you look at HECO’s website, the first section background changes the very moment the second line of the paragraph “Heco is a design studio…” starts scrolling into view from the bottom.
Background when only the first line has scrolled into view: https://i.gyazo.com/212522fe6640705e40007d9aad5692cf.png
Background when the second line has scrolled into view: https://i.gyazo.com/64e9ea7b2dd24fb909ab5124df69bdf5.png
All they’ve done, is that they’ve placed two divs, one on top of the other, position fixed, 0px from top, and 100vh/100vw in height and width. Both are direct children of body. One of the divs has the light wavy background that you see when the page first opens, and another div on top has the dark background with patterns, but this dark background div is initially hidden, with opacity set to 0.
They’ve added a “while page is scrolling” interaction on the page, so that when the page scrolls down by, assuming 7%, the div with the light wavy background goes from opacity 100 to opacity 0, and the div with the dark background goes from opacity 0 to opacity 100.
Once you scroll down to about 15% of the site, the dark background disappears and you get a plain white background, which then eventually changes to light blue and so on. They’ve done this by changing the dark div’s opacity back to 0 after scrolling down 15% of the page, in the very same “while page is scrolling interaction”, and from that point onwards, they’re simply affecting the background color of the body like PixelGeek has shown in one of his tutorials.
I hope I didn’t too a terrible job explaining! If you can provide a preview link of any project I can try to demonstrate it in there for you, in case you can’t figure it out.
Hope that helps.