使用typeIt实现打字效果

我们可以通过typeIt插件实现打字效果。

typeIt网址：https://typeitjs.com/

一、加载脚本

可以使用cdn

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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，源码里是使用队列维护文字内容，逐个输出并改变光标位置。