我需要幫助來完成一個JavaScript效果。我期待在這個網站上完成https://www.lucidmotors.com/的效果——在首頁的第三部分，你可以看到文本滾動/揭示是其他文本平滑。

我在codepen https://codepen.io/Bes7weB/pen/zYKoexK上發現這個選項與我需要的效果相似，但是有點起伏，我需要它更平滑。

射流研究…

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;

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

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

:root {
  --percentage: 0;
}

body {
  background-color: #000;
  margin: 0;
  height: 600vh;
}

.ml3 {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

span {
  font-family: Helvetica;
  margin: 0;
  padding: 0;
  font-size: 48px;
  color: #fff;
  letter-spacing: -0.3px;
}

.ml3 span {
  opacity: var(--percentage);
}

超文本標記語言

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

任何幫助都將是巨大的

# # #這可能是你正在尋找的，發現它非常有趣，我認為我的答案可以改進，如果你只對垂直滾動感興趣，你應該檢查window.scrollY變量。

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

var letter = document.querySelectorAll(".letter");

document.addEventListener("scroll", (e) => {
  let scrolled =
    document.documentElement.scrollTop /
    (document.documentElement.scrollHeight -
      document.documentElement.clientHeight) *
    letter.length;

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

:root {
  --percentage: 0.2;
}

body {
  background-color: #000;
  margin: 0;
  height: 600vh;
}

.ml3 {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

span {
  font-family: Helvetica;
  margin: 0;
  padding: 0;
  font-size: 48px;
  color: #fff;
  letter-spacing: -0.3px;
}

.ml3 span {
  opacity: var(--percentage);
}

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