HTML 单文件制作打字机切换动画

  • HTML 单文件制作打字机切换动画已关闭评论
  • 54 次浏览
  • A+
所属分类:Web前端
摘要

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


预览

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

我要成为
赛马娘
高手!

如果这里的黄字不会动,可能是因为这里的架构不支持,请到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>
我要成为
赛马娘
高手!

 

单词切换动画

要通过脚本来更改文本内容,首先需要创建一个变量来获取目标文本。由于中间行已经标记了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>

 

希望本教程能够有所帮助。