<div class="karaoke"><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, perferendis voluptates iste eos quas dolorem, harum voluptatum excepturi libero doloribus ullam quod. Sapiente cum sequi voluptatibus in, voluptatem et illum!</span>
</div>

body {
  margin: 0;
  height: 500vh;
  font-family: sans-serif;
  color: #fff;
  background-color: #000;
}

.karaoke {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 85%;
  transform: translate(-50%, -50%);
}

.karaoke span {
  font-size: 6vw;
  background: linear-gradient(to right, #3f3f3f 50%, #fff 50%) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  box-decoration-break: slice;
  -webkit-box-decoration-break: slice;
}

const span = document.querySelector('.karaoke span');

window.addEventListener('scroll', () => {
  const t = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight);
  span.style.backgroundPosition = `${-t * 100}% 0`;
});