Javascript 基于滚动逐字淡入文本

我在必须实现的功能方面遇到了问题，我希望这样做（检查第二部分）->

这些字母需要淡入和淡出，根据滚动，这是我迄今为止得到的

<div class="ml3">
  <h1>THIS IS MY TEXT THAT IT'S GOING TO SHOW IN SCROLL</h1>
</div>

var textWrapper=document.querySelector（'.ml3'）；
textWrapper.innerHTML=textWrapper.textContent.replace（/\S/g，“$&”）；
var letter=document.queryselectoral（'.letter'）；
var i=0；
var-currentID=0；
var slideCount=字母长度；
document.addEventListener（'scroll'，（e）=>{
设scrolled=document.documentElement.scrollTop/（document.documentElement.scrollHeight-document.documentElement.clientHeight）；
var nextID=currentID+1；
if（nextID

---

正如你所看到的，这离我想要的还很远，但我真的不知道怎么做，如果有人能帮助我，那就太棒了！谢谢

我非常喜欢那种效果！！谢谢你提出这个问题！；）

因此，这里有一些东西可以帮助你继续挑战

在

滚动

处理程序中，我替换了：

var nextID = currentID + 1;
if(nextID < slideCount){
  letter[nextID].style.setProperty('--percentage', `${scrolled / 1}` * nextID);
}
currentID = nextID;

：根目录{
--百分比：0；
}
身体{
背景色：#000；
保证金：0；
高度：1120vh；
}
.ml3{
位置：粘性；
排名：0；
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
跨度{
字体系列：Helvetica；
保证金：0；
填充：0；
字体大小：48px；
颜色：#fff；
字母间距：-0.3px；
}
.ml3跨度{
不透明度：var（--百分比）；
}

这是我的文本，它将在滚动中显示

嘿！那真的很有帮助，谢谢你！我设法做了一些类似的事情，但不一样，我终于找到了他们在参考网站中使用的插件，它叫scrollmagic，所以我将使用它，但再次感谢你！

var textWrapper = document.querySelector('.ml3');
    textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

    var letter = document.querySelectorAll('.letter');
    var i = 0;
    var currentID = 0;
    var slideCount = letter.length;

    
    document.addEventListener('scroll', (e) => {
      let scrolled = document.documentElement.scrollTop / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
      
      
      var nextID = currentID + 1;

        if(nextID < slideCount){

            letter[nextID].style.setProperty('--percentage', `${scrolled / 1}` * nextID);
        }
        
        currentID = nextID;
      
    });

var nextID = currentID + 1;
if(nextID < slideCount){
  letter[nextID].style.setProperty('--percentage', `${scrolled / 1}` * nextID);
}
currentID = nextID;

letter.forEach(function (l, i) {
  if (i / letter.length < scrolled) {
    l.style.setProperty("--percentage", 1);
  }else{
    l.style.setProperty("--percentage", 0);
  }
});