免费写作文网站大连网站制作公司费用多少
你当前项目实现了一个非常丝滑的 打字机文字效果动画，使用的是自定义的 typical.js 脚本。下面我将给出一份逐步拆解的中文教程，帮你或其他初学者快速上手并自定义这个打字效果。
✨ 最终效果
打开页面后，中央会逐字显示：
Hello
Hello world!
Welcome to the typing effect demo.
其中，文字是一个一个打出来的，中间有停顿和替换的动画效果，模拟打字体验。
🧱 第 0 步：项目结构
你的项目由以下文件构成：
typing-effect/
├── index.html // 页面主结构，绑定 JS 调用
├── typical.js // 实现核心打字动画的逻辑
🔤 第 1 步：HTML 结构解析（index.html）
<body><div id="output"></div><!-- 引入打字效果脚本 --><script src="./typical.js"></script><script>document.addEventListener('DOMContentLoaded', () => {const node = document.getElementById('output');type(node,'Hello ',1000,'Hello world!',1000,' Welcome to the typing effect demo.');});</script>
</body>
✅ 关键点说明
- 页面只有一个空的
<div id="output">，用于动态输出文字。 type()函数接收多个参数：- 字符串：逐字显示出来；
- 数字：表示等待多少毫秒；
- 你也可以传入函数，实现更复杂逻辑。
⚙️ 第 2 步：typical.js 核心逻辑分析
2.1 主要入口函数：type(node, ...args)
async function type(node, ...args) {for (const arg of args) {switch (typeof arg) {case 'string':await edit(node, arg); // 文字变化动画break;case 'number':await wait(arg); // 延迟等待break;case 'function':await arg(node, ...args); // 自定义行为break;default:await arg;}}
}
2.2 edit()：逐字比较和更新
async function edit(node, text) {const overlap = getOverlap(node.textContent, text);await perform(node, [...deleter(node.textContent, overlap), ...writer(text, overlap)]);
}
- getOverlap：找到当前文本和目标文本的共同部分，避免重复删除。
- deleter：从当前文本删到重合部分。
- writer：从重合部分写到完整文本。
- 组合起来就是 “智能替换”。
2.3 perform()：每次逐步更新 textContent
async function perform(node, edits, speed = 60) {for (const op of editor(edits)) {op(node); // 每次修改文本await wait(speed + speed * (Math.random() - 0.5)); // 模拟人类打字速度波动}
}
🧪 第 3 步：可定制用法示例
你可以把这段改成你自己的文字，比如：
type(node,'你好，世界！',800,'欢迎来到 Typing.js 的演示。',1500,'😎 你可以无限扩展内容~',1000,'再见～'
);
或者在多个元素中交替：
const title = document.getElementById('title');
const desc = document.getElementById('desc');type(title, '🚀 Typing Animation');
type(desc, 1000, 'This is an elegant way to present words one by one.');
🎁 拓展玩法建议
-
打字音效
- 每次字符变化时播放「键盘敲击」音效。
-
循环播放
- 在
type()外部加入循环函数，形成无限播放文字动画。
- 在
-
配合 CSS 闪烁光标
- 添加
<span class="cursor">|</span>伪元素配合动画：
.cursor {display: inline-block;width: 1px;background: white;animation: blink 1s infinite; }@keyframes blink {0%, 50% { opacity: 1; }51%, 100% { opacity: 0; } } - 添加
✅ 总结
| 模块 | 作用 |
|---|---|
type() | 接收多个动画步骤（字符串 / 等待 / 函数） |
edit() | 根据目标文字智能删除 & 添加 |
writer() | 模拟打字效果 |
deleter() | 模拟删除效果 |
perform() | 执行每一步并添加速度差 |
这个项目结构简洁、逻辑清晰，是一个很适合自定义与学习 JS 动画的案例。