Hello everyone, trying to make a cool effect when scrolling the page: there is a section with a title, the title is transparent with a stroke, when scrolling the page when the title appears below, approximately 100px from the bottom edge of the screen as it scrolls, it starts to fill up. for example, we stopped in half of the filled text and he stayed on, went on, started to flood again.
Also, when we have the distance from the top edge to the header as somewhere around 100px, the fill is already starting to go from top to bottom, this is the idea, like this site , only there as far as they know the custom scroll and they all translate . You need to do something similar, but on a standard scroll, if possible. Picture for clarity. 
My static attempt to see how this works:
html:
<section> <div >Заголовок</div> <div>Заголовок</div> </section> css:
section { background-color: #6da7ff; color: tomato; height: 100vh; text-align: center; position: relative; } div:first-child { position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 100px; font-weight: bold; -webkit-text-stroke: 2px tomato; -webkit-text-fill-color: transparent; } div:last-child { position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 100px; font-weight: bold; clip: rect(0, 1500px, 800px, 0); } How to deal with js could not understand ..
