在页面滚动上平滑地显示html文本一个字母？答案

【问题标题】：Reveal html text letter by letter smoothly on page scroll?在页面滚动上平滑地显示html文本一个字母？
【发布时间】：2021-10-16 06:10:18
【问题描述】：

我在尝试完成 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);
    }
  });
});

CSS

: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);
}

HTML

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

任何帮助都会很棒

【问题讨论】：

我看你只对垂直滚动感兴趣，对吧？
您可以在文本上移动透明图像。

标签： javascript html jquery css wordpress

【解决方案1】：

这可能是您正在寻找的，觉得它很有趣，我认为我的答案可以改进，如果您只对垂直滚动感兴趣，您也应该检查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>

【讨论】：