在构建个人博客、产品官网或项目展示页面时，我们总希望加入一些动态元素来吸引用户的目光。其中，“打字机效果”就是一个非常经典且能有效提升页面生动性的交互特效。它模拟了文字逐个输入、暂停、删除再输入的过程，能瞬间让静态的文字变得富有生命力。

今天，就给大家推荐一款我最近发现的、实现该特效的轻量级JavaScript库：typing-word。

什么是 typing-word？

typing-word 是一个专注于模拟打字机效果的开源JS库。它最大的特点就是 轻量、零依赖、易于使用。你不需要引入庞大的jQuery或其他框架，只需一个几十KB的JS文件，就能轻松为你的网站添加酷炫的打字动画。

核心特性：

  • 零依赖：纯原生JavaScript编写，无需任何外部库。
  • 链式调用：API设计优雅，可以通过链式调用（如 .type().pause().delete()）来组合复杂的打字动画，代码逻辑非常清晰。
  • 高度可配置：无论是打字速度、删除速度，还是光标样式，都可以轻松自定义。
  • 简单易用：上手非常快，只需几行代码即可集成到你的项目中。

如何使用？

下面我们通过一个简单的例子，看看集成typing-word有多方便。

第一步：准备HTML

首先，在你的HTML文件中，放置一个用于显示打字效果的容器。可以是一个 <span> 或 <div> 标签。

1
<span id="typing-text"></span>

第二步：引入JS文件

从 typing-word 的 GitHub仓库 下载 dist 目录下的 typing-word.js 文件，并在你的HTML中引入。

1
<script src="./dist/typing-word.js"></script>

第三步：编写JavaScript

现在，我们可以初始化typing-word并设置动画效果了。它的链式API设计让整个过程非常直观。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 找到你的HTML元素
const el = document.querySelector('#typing-text');

// 创建实例并开始定义动画
const typing = new TypingWord({
    el: el,
    text: 'Hello, World!', // 可以设置一段默认文本
    cursor: '|', // 自定义光标
    time: 200, // 每个字符的打字间隔（毫秒）
});

// 使用链式调用来创建动画序列
typing
    .type('你好，这是一个打字机特效。') // 输入新文本
    .pause(1000) // 暂停1秒
    .delete(4) // 删除最后4个字符（“特效。”）
    .type('Demo。') // 输入“Demo。”
    .pause(1000)
    .delete() // 删除全部文本
    .type('你可以用它来介绍自己，')
    .pause(500)
    .type('展示你的项目！')
    .run(); // 最后，不要忘记调用 run() 来启动动画！

把这些代码保存并用浏览器打开，你就能看到流畅的打字机动画了。是不是非常简单？

总结

相比于一些复杂的动画库，typing-word 专注于做好“打字机特效”这一件事，并把它做到了极致的简洁。如果你正在寻找一个轻便、高效的解决方案来为你的网站增添一抹亮色，那么 typing-word 绝对是一个值得尝试的选择。

它非常适合用在个人简介、网站Slogan、或是任何你需要动态展示文本的场景。

感兴趣的话，不妨去它的GitHub仓库看看，给作者一个Star吧！

项目地址： https://github.com/a-xiaoyao/typing-word