动画打字 js - JavaScript

动画打字 js 是一个开源的 JavaScript 库，用于在网页上实现打字机效果的动画效果。

功能特性

• 可以设置打字动画的速度、延迟和删除速度
• 支持文字和 HTML 标签的打字效果
• 支持自定义光标和光标闪烁效果
• 支持设置打字完成回调函数

安装

使用 NPM 安装

$ npm install typewriter-effect

在 HTML 文件中引入

<script src="path/to/typewriter.js"></script>

使用方法

const app = document.getElementById('app');

const typewriter = new Typewriter(app, {
  loop: true,
  cursor: '_',
  cursorBlinking: true,
});

typewriter.typeString('欢迎使用动画打字js')
  .pauseFor(1000)
  .deleteAll()
  .typeString('让你的网站更加生动')
  .pauseFor(1000)
  .start();

在 HTML 文件中加入一个元素用于展示打字效果。

<div id="app"></div>

选项

loop

• 类型: Boolean
• 默认值: false

是否开启循环打字，默认为 false。

cursor

• 类型: String
• 默认值: |

光标样式，默认为 |。

cursorBlinking

• 类型: Boolean
• 默认值: true

光标是否闪烁。

delay

• 类型: Number
• 默认值: 75

打字的延迟时间，单位为毫秒。

deleteSpeed

• 类型: Number
• 默认值: 50

删除文字的速度，单位为毫秒。

autoStart

• 类型: Boolean
• 默认值: false

实例化后是否自动开始动画。

strings

• 类型: Array
• 默认值: []

设置需要打字的字符串数组。如果设置了该选项则需要使用 startAll 方法开始所有的打字动画。

onComplete

• 类型: Function
• 默认值: null

打字动画完成后的回调函数。

方法

typeString(str)

• 参数：str（必选），设置需要打字的字符串，支持 HTML 标签。
• 返回值：返回实例对象，用于链式调用其他方法。

deleteAll(speed)

• 参数：speed（可选），删除的速度，单位为毫秒。
• 返回值：返回实例对象，用于链式调用其他方法。
• 备注：如果传入的 speed 值小于等于 0，则会立即删除。

start()

• 参数：无
• 返回值：无
• 备注：自动开始打字动画。

stop()

• 参数：无
• 返回值：无
• 备注：停止打字动画。

startAll()

• 参数：无
• 返回值：无
• 备注：开始所有的自定义字符串打字动画（仅适用于 strings 选项）。

示例

点击此处查看动画打字js的示例