javascript - 用打字机效果打印文本，每句循环后清晰

Question

我正在尝试用我的文本实现打字机效果，其中打印每个句子(h1 标签)，然后清除文本并打印第二个句子。一旦第二个或第三个句子完成打印，它应该清除并开始再次循环打印第一个句子。

我无法清除第一句话，所有文本都被堆叠起来，也没有出现“the”这个词。

任何想法如何进行？我想将文本保留在 HTML 中，以便我可以在不同的页面上重复使用该脚本。

JSFiddle 链接:https://jsfiddle.net/b33uhLL2/

HTML:

<div id="typewriter">
  <h1>This<br> is<br> the<br>first<br><span class="highlight">sentence</span></h1>
  <h1>This<br> is<br> the<br>second<br>sentence</h1>
</div>

JS:

function setupTypewriter(t) {
  var HTML = t.innerHTML;

  t.innerHTML = "";

  var cursorPosition = 0,
    tag = "",
    writingTag = false,
    tagOpen = false,
    typeSpeed = 200,
    tempTypeSpeed = 0;

  var type = function() {

    if (writingTag === true) {
      tag += HTML[cursorPosition];
    }

    if (HTML[cursorPosition] === "<") {
      tempTypeSpeed = 0;
      if (tagOpen) {
        tagOpen = false;
        writingTag = true;
      } else {
        tag = "";
        tagOpen = true;
        writingTag = true;
        tag += HTML[cursorPosition];
      }
    }
    if (!writingTag && tagOpen) {
      tag.innerHTML += HTML[cursorPosition];
    }
    if (!writingTag && !tagOpen) {
      if (HTML[cursorPosition] === " ") {
        tempTypeSpeed = 0;
      } else {
        tempTypeSpeed = (Math.random() * typeSpeed) + 50;
      }
      t.innerHTML += HTML[cursorPosition];
    }
    if (writingTag === true && HTML[cursorPosition] === ">") {
      tempTypeSpeed = (Math.random() * typeSpeed) + 50;
      writingTag = false;
      if (tagOpen) {
        var newSpan = document.createElement("span");
        t.appendChild(newSpan);
        newSpan.innerHTML = tag;
        tag = newSpan.firstChild;
      }
    }

    cursorPosition += 1;
    if (cursorPosition < HTML.length - 1) {
      setTimeout(type, tempTypeSpeed);
    }

  };

  return {
    type: type
  };
}


var typer = document.getElementById('typewriter');
typewriter = setupTypewriter(typewriter);
typewriter.type();

CSS:

h1 {
  font-family: helvetica;
  font-size: 20px;
}

Answer 1

GreenSock 您可能会有些运气。

您可以在时间线内使用 .from。这是使用两个 header 的起点。

const container = document.querySelector('div')
const h1 = document.querySelector('h1')
const h2 = document.querySelector('h2')

const typewriterTimeline = new TimelineMax({
  onStart: () => container.classList.remove('hidden')
})

typewriterTimeline
  .add(TweenMax.from(h1, 3, {text: '', delimiter: ' '}))
  .add(TweenMax.from(h2, 3, {text: '', delimiter: ' '}))

.hidden {
  display: none;
}

<div class='hidden'>
  <h1>This is the title</h1>
  <h2>This is the subtitle</h2>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/TextPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>

为了使其更具动态性，您可以遍历您的内容并生成时间轴。