typed.js翻译站点

核心定位

Typed.js 是一个轻量级的 JavaScript 动画库，专注于在网页上模拟“打字机”输入效果。它不依赖 jQuery，通过原生 JavaScript 实现，适合嵌入各类前端项目中。

主要功能

• 逐字输入与删除：按设定速度将字符串逐字符显示，并可反向删除，形成循环打字效果
• 多字符串轮播：支持传入字符串数组，依次输入、停顿、删除、切换下一条
• 光标模拟：内置可配置的闪烁光标，增强视觉真实感
• 事件回调：提供 onBegin、onComplete、preStringTyped、onStringTyped、onDestroy 等钩子，便于与其他逻辑联动
• HTML 内容支持：字符串中可包含 HTML 标签，实现带格式的打字动画

快速上手

通过 npm 安装：

npm install typed.js

基础用法：

import Typed from 'typed.js';

const typed = new Typed('#element', {
  strings: ['第一段文字', '第二段文字'],
  typeSpeed: 50,
  backSpeed: 30,
  loop: true
});

也可通过 CDN 直接引入 typed.umd.js，使用全局 Typed 对象。

关键配置项

适用场景

• 首屏标题轮换：用打字效果交替展示品牌标语或核心关键词
• 代码演示：模拟代码逐行输入，适合技术文档或教学页面
• 终端风格界面：配合暗色主题，营造命令行交互氛围
• 引导页文案：在用户进入页面时吸引注意力，但需控制时长避免干扰

注意事项

• 若目标元素中已有静态文本，Typed.js 会将其替换为动画内容
• 移动端性能开销较低，但长文本或极快速度可能引起重排，建议控制单次字符串长度
• 项目维护状态相对稳定，但更新频率不高，使用前建议确认与当前框架版本的兼容性

资源入口

官方演示与文档地址：https://mattboldt.com/demos/typed-js/

源码仓库：https://github.com/mattboldt/typed.js