使用typeIt实现打字效果

时间:2024-03-01 16:34:55

我们可以通过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,源码里是使用队列维护文字内容,逐个输出并改变光标位置。