Vue3 神级工具:终于可以实现打字的动画效果了!
Typed.js 是一个轻量级的 JavaScript 库，用于在网页上实现打字机动画效果。它支持自定义打字速度、循环模式、回调函数等，非常适合用于动态展示标语、代码片段或交互式文本效果。
核心特性
- 打字动画：模拟逐字输入和删除的效果。
- 高度可配置：调整速度、循环次数、光标样式等。
- 回调函数：在动画开始、结束或每次循环时触发自定义逻辑。
- 无依赖：纯 JavaScript 实现，无需 jQuery 或其他库。
基础用法示例
<!DOCTYPE html>
<html>
<head>
<!-- 引入 Typed.js -->
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
</head>
<body>
<!-- 定义一个展示动画的容器 -->
<div id="typed-text"></div>
<script>
// 当 DOM 加载完成后初始化
document.addEventListener('DOMContentLoaded', function () {
// 配置参数
const options = {
strings: ["Hello World!", "欢迎使用 Typed.js", "Typing Effect "], // 要显示的文本数组
typeSpeed: 100, // 打字速度（毫秒）
backSpeed: 50, // 回删速度
loop: true // 是否循环
};
// 初始化 Typed 实例，绑定到 HTML 元素
const typed = new Typed('#typed-text', options);
});
</script>
</body>
</html>进阶配置示例
const typed = new Typed('#typed-element', {
strings: [
'第一段文字',
'第二段文字 <strong>支持 HTML 标签</strong>', // 支持内嵌 HTML
'甚至可以嵌入图标 <i class="fa fa-smile"></i>'
],
typeSpeed: 40, // 打字速度
backSpeed: 20, // 回删速度
startDelay: 500, // 开始前的延迟
backDelay: 1500, // 删除后的停顿
smartBackspace: true, // 智能删除（匹配上一段文字）
showCursor: true, // 显示光标
cursorChar: '|', // 自定义光标符号
loopCount: 3, // 循环次数（Infinity 表示无限）
// 回调函数
onComplete: (self) => {
console.log('动画完成！', self);
},
preStringTyped: (pos, self) => {
console.log(`开始输入第 ${pos + 1} 段文字`);
}
});