typed.js开始输入滚动文件

Question

我有这样的密码：

<h1 class="font" id="typed3" style="text-align: center; font-size: 400%; color: black;">About Us</h1>
<br>
<br>

<script>

  var typed2 = new Typed('#typed3', {
      strings: ['About Us'],
      typeSpeed: 400,
      

      backSpeed: 0,
      fadeOut: true,
    });
  </script>

对于typed.js，但是我希望它在用户滚动到文本时开始输入。这个是可能的吗？

Answer 1

我不太熟悉您特别提到的typed.js库，但是假设您所展示的代码是如何工作的，您可以在使用交叉口观测器查看您的<h1>时运行它

看看这个小提琴，看看IntersectionObserver在用你的例子：https://jsfiddle.net/Ollie1700/0q7on5d2/8/。

IntersectionObserver的行为并不是微不足道的，表面上看，似乎有很多移动的部分。但我们在这里所做的一切是：

1. 使用包含有关交叉口信息的回调初始化新的IntersectionObserver
2. 我们指示IntersectionObserver使用ID "typed3“来观察元素。这意味着当"#typed3“元素进入视口时，将触发IntersectionObserver的回调。
3. 在回调中，为我们提供了一个条目数组(因为IntersectionObserver可以观察多个DOM元素)。在本例中，我们创建了一个循环，但如果需要，我们也可以引用entries[0]，因为我们知道只有一个元素
4. IntersectionObserver API为我们提供了isIntersecting标志，当观察到的元素在视图端口中可见时，它是true。因此，我们使用一个if语句，其中包含触发原始类型代码的标志。
5. 在触发typedjs代码之后，我们指示IntersectionObserver停止观察(unobserve)我们的元素，否则该代码将在该元素每次进入视图时运行。(虽然这可能是您想要的行为，但是尝试省略unobserve调用)

如果这件事适合你，请告诉我。