HTML 单文件制作打字机切换动画-Toy模板网

这篇具有很好参考价值的文章主要介绍了HTML 单文件制作打字机切换动画。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

预览

打字机动画是一种常见的网页效果，通常用于“我是某某”这样的场景，比如个人简介或者产品介绍，需要在多个词汇之间切换。这篇博文将从头开始制作类似的效果。它看起来像这样：

我要成为
赛马娘
高手！

如果这里的黄字不会动，可能是因为这里的架构不支持，请到https://penghy.com/?p=typing-switching-animation-with-a-html-single-file查看效果

没错，这就是本站首页上的动画。由于不需要导入 CSS、JavaScript 等文件，因此可以轻松地嵌入到各种博客的HTML容器中。

基础文本

首先像往常一样创建基本文本，例如：

我要成为 <br>
赛马娘<br>
高手！

我要成为
赛马娘
高手！

可以在 <span> 标签内用 id 标记中间行，然后在 <style> 标签内写入 css 样式来更改文本颜色。

<span id = "Text01"><!-- 用 id“Text01”标记这些文本-->
  Pretty Derby<br>
</span>

<style>
  #Text01 /*设置ID为“Text01”的文本样式*/
  {
    color : #FF8000;
  }
</style>

我要成为
赛马娘
高手！

文章来源地址https://www.toymoban.com/news/detail-844255.html

单词切换动画

要通过脚本来更改文本内容，首先需要创建一个变量来获取目标文本。由于中间行已经标记了id“Text01”，所以可以通过“document”实现。顺便说一句，JavaScript也可以直接写在<script>标签中。

<script>
    const text = document.getElementById("Text01");    //获取标记的文本
    text.textContent = "原神";    //设置文本内容
</script>

我要成为
赛马娘
高手！

现在创建一个函数和一个数组，让它自动切换。

每当执行此函数时，索引就会从 0 循环递增到数组的长度。

<script>
const words = ["C++","Go","Unreal","Unity"];    //任何想要显示的词汇
const text = document.getElementById("Text01");    //获取标记的文本
let wordIndex = 0;    //当前词在words数组中的索引
let delay = 100;    //显示词汇切换的间隔

const UpdateText = () =>
    {
        text.textContent = words[wordIndex];    //将文本内容设置为数组中对应的词汇
        wordIndex++;    //index++ , 准备好显示下一个词
        if(wordIndex>=words.length)
            wordIndex = 0;    //当索引超过长度时将其重置为零，使其循环显示

        setTimeout(UpdateText,delay);    //一定延迟后再次调用该函数
			
    }

UpdateText();    //不要忘了调用这个函数
</script>

我要成为
赛马娘
高手！

字符打字动画

使字符逐个出现，主要是通过分割字符串。正好有一个简单的函数叫substring。

比如将文本内容设置为数组“words”的第“wordIndex”元素的第一个“charIndex”字符：

text.textContent = words[wordIndex].substring(0,charIndex);

一开始，默认状态是输入，也就是说“charIndex”每次都会增加。可以使用名为“isDelete”的布尔变量来记录状态。

let isDelete = false;

出现字符意味着“isDelete”将为false。当“charIndex”大于“worlds”的当前元素时，将“isDelete”设置为true。

同时，为“延迟”设置较长的时间，使其在状态发生变化时停留的时间更长。

if(!isDelete)
    {
        delay = DefaultDelay; //当当前状态为默认状态时，不要忘记将延迟重置为默认时间
        charIndex++;
        if(charIndex-1==words[wordIndex].length)
        {
            delay = WaitDelay;
            isDelete = true;
        }
    }

如果状态为“Deleting”，则每次charIndex都会减1。当索引下降到0时，或者说所有当前单词都已被删除时，就意味着是时候切换到下一个单词了。复制之前在里面写的“切换单词”的代码。

 else if(isDelete)
    {
        delay = DefaultDelay;
        charIndex--;
        if(charIndex<1)
        {
            isDelete = false;
            wordIndex++;
            if(wordIndex>=words.length)
            wordIndex = 0;
        }        
    }

芜湖！现在代码就基本完成了。如果需要在某些博客中嵌入此功能，只需将所有代码直接复制并粘贴到 html 容器中即可！

完整源代码

<div>
    我要成为 <br>

    <span id = "text">
    赛马娘
    </span><br>

    高手!

</div>

<style>
    #text 
    {
      color : #FF8000;
    }
</style>

<script>
          const words = ["C++","Go","Unreal","Unity"];
          const text = document.getElementById("text");
          let wordIndex = 0;
          let charIndex = 0; 
          let isDelete = false;
          let DefaultDelay = 100;
          let WaitDelay = 700;
          let delay = 100;
          const UpdateText = () =>
          {
              text.textContent = words[wordIndex].substring(0,charIndex);   
              if(!isDelete)
              {
                  delay = DefaultDelay;
                  charIndex++;
                  if(charIndex-1==words[wordIndex].length)
                  {
                      delay = WaitDelay;
                      isDelete = true;
                  }
              }
              else if(isDelete)
              {
                  delay = DefaultDelay;
                  charIndex--;
                  if(charIndex<1)
                  {
                      isDelete = false;
                      wordIndex++;
                      if(wordIndex>=words.length)
                          wordIndex = 0;
                  }        
              }
              setTimeout(UpdateText,delay);
          };
          UpdateText();
</script>