我们可以通过typeIt插件实现打字效果。
typeIt网址:https://typeitjs.com/
一、加载脚本
可以使用cdn
<script src="https://cdn.jsdelivr.net/npm/typeit@6.1.1/dist/typeit.min.js"></script>
或是用npm下载到本地
import TypeIt from "typeit";
二、调用函数
新建TypeIt对象,传入需要打字效果的位置的元素名,设置好参数即可。
new TypeIt("#element", { strings: "This is my string!", speed: 75, loop: true }).go();
参数有很多,如reset、freeze、unfreeze、type、move、delete等,可以根据需要*选择。
该插件已开源至github,源码里是使用队列维护文字内容,逐个输出并改变光标位置。