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

Posted 2023-05-09

【中文标题】在页面滚动上平滑地显示html文本一个字母？

【英文标题】：Reveal html text letter by letter smoothly on page scroll?

【发布时间】：2021-10-16 06:10:18

【问题描述】：

我在尝试完成 javascript 效果时需要帮助。我希望在此站点上实现效果 https://www.lucidmotors.com/ - 在主页下方的第三部分中，您可以看到文本滚动/显示在其他文本之上是平滑的。

我在 codepen https://codepen.io/Bes7weB/pen/zYKoexK 上找到了这个选项，类似于我需要的效果，但它有点不稳定，我需要它更平滑。

JS

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>

任何帮助都会很棒

【问题讨论】：

我看你只对垂直滚动感兴趣，对吧？

您可以在文本上移动透明图像。

【参考方案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>