3分钟上手！typed.js让你的网站文字"活"起来——从API文档到动态打字效果全指南

你还在为网站缺乏吸引力而烦恼？访客停留时间短、关键信息无人关注？本文将带你用typed.js实现动态打字效果，3分钟让静态文字变成会"说话"的交互元素，轻松提升用户体验和页面转化率。读完你将掌握：基础配置、高级定制、常见场景应用及完整API文档查阅方法。

什么是typed.js？

typed.js是一个轻量级JavaScript打字动画库（Typing Animation Library），能模拟人类打字的节奏和效果，支持自定义速度、退格、循环等多种特性。通过简单配置，即可为网站标题、标语、按钮文本等元素添加动态打字效果，增强页面交互感和视觉吸引力。

项目核心代码位于src/typed.js，官方API文档可参考docs/API.md。

快速开始：5行代码实现基础打字效果

引入方式

推荐使用国内CDN加速地址（确保访问速度）：

<script src="https://cdn.bootcdn.net/ajax/libs/typed.js/2.0.12/typed.min.js"></script>

基础HTML结构

<!-- 目标元素 -->
<span id="typed-output"></span>

JavaScript配置

// 初始化Typed实例
const typed = new Typed('#typed-output', {
  strings: ['你好，访客！', '欢迎使用typed.js', '让文字动起来～'],
  typeSpeed: 100,  // 打字速度(ms/字符)
  backSpeed: 50,   // 退格速度(ms/字符)
  loop: true       // 循环播放
});

核心配置项详解

typed.js提供丰富配置选项，位于src/defaults.js，以下是常用参数说明：

参数名	类型	默认值	描述
strings	Array	['默认文本...']	要显示的字符串数组
typeSpeed	Number	0	打字速度（毫秒/字符）
backSpeed	Number	0	退格速度（毫秒/字符）
startDelay	Number	0	开始延迟（毫秒）
backDelay	Number	700	退格前等待时间（毫秒）
loop	Boolean	false	是否循环播放
showCursor	Boolean	true	是否显示光标
cursorChar	String	'	'
shuffle	Boolean	false	是否随机打乱字符串顺序

智能退格（smartBackspace）

启用后，退格时只会删除与前一个字符串不匹配的部分，提高动画流畅度：

smartBackspace: true  // 默认启用

淡入淡出效果（fadeOut）

替代传统退格动画，实现文字渐隐效果：

fadeOut: true,
fadeOutClass: 'typed-fade-out',  // 自定义CSS类
fadeOutDelay: 500               // 淡出延迟（毫秒）

高级功能：事件回调与HTML支持

事件回调函数

typed.js提供完整生命周期事件，可在特定时机执行自定义逻辑：

new Typed('#output', {
  // 开始打字前触发
  onBegin: (self) => {
    console.log('打字开始！');
  },
  // 每个字符串输入完成后触发
  onStringTyped: (arrayPos, self) => {
    console.log(`第${arrayPos+1}个字符串输入完成`);
  },
  // 所有打字完成后触发
  onComplete: (self) => {
    console.log('打字结束！');
  }
});

完整事件列表可查看docs/API.md。

HTML内容支持

设置contentType: 'html'可解析字符串中的HTML标签：

new Typed('#output', {
  strings: ['<strong>加粗文本</strong>', '<em>斜体文本</em>', '<a href="#">链接文本</a>'],
  contentType: 'html'  // 默认为'html'
});

实际应用场景

1. 网站标题动画

为首页H1标题添加打字效果，立即抓住访客注意力：

<h1><span id="hero-title"></span></h1>
<script>
new Typed('#hero-title', {
  strings: ['创新科技', '智能生活', '未来已来'],
  typeSpeed: 80,
  backSpeed: 40,
  loop: true,
  cursorChar: '_'
});
</script>

2. 输入框提示动画

为搜索框或表单输入框添加动态提示文本：

<input type="text" id="search-input" placeholder="">
<script>
new Typed('#search-input', {
  strings: ['搜索产品...', '查找帮助文档...', '输入关键词'],
  typeSpeed: 60,
  backSpeed: 30,
  loop: true,
  attr: 'placeholder'  // 作用于placeholder属性
});
</script>

API文档查阅指南

完整API文档由ESDoc自动生成，位于docs/目录，主要包含：

• 核心类：Typed - 主类定义
• 配置项：defaults - 默认参数说明
• 方法：toggle()、stop()等实例方法

文档目录结构如下：

docs/
├── API.md              # 手动维护的API文档
├── class/              # 类定义文档
├── file/               # 文件文档
├── index.html          # 文档首页
└── variable/           # 变量文档

常见问题解决

光标不显示？

检查showCursor: true是否启用，或自定义CSS样式：

.typed-cursor {
  opacity: 1;
  animation: blink 0.7s infinite;
}
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

中文打字不流畅？

调整typeSpeed至80-150ms区间，避免速度过快导致字符重叠。

总结与扩展

typed.js通过简单配置即可实现专业打字动画效果，是提升网站交互体验的高效工具。建议结合项目实际需求，合理调整速度、延迟等参数，避免过度动画影响用户体验。

更多高级用法可参考：

• 源码示例：assets/demos.js
• 官方文档：docs/API.md

若需贡献代码或报告问题，可访问项目仓库：https://gitcode.com/gh_mirrors/ty/typed.js

收藏本文，下次需要为网站添加动态文字效果时，即可快速上手！