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>
我要成为
赛马娘
高手!
单词切换动画
要通过脚本来更改文本内容,首先需要创建一个变量来获取目标文本。由于中间行已经标记了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>
希望本教程能够有所帮助。
热门相关:拳皇之梦 灭世之门 异界之极品奶爸 剑道邪尊 全民女神之重生腹黑千金