一款让文字动起来的 JavaScript 库，特别适合那些刚刚踏入前端领域的小伙伴们。本文将为你详细介绍Typed.js，带你领略其简单易用的特性和如何在项目中应用。
https://github.com/mattboldt/typed.js/
1. Typed.js是什么？
Typed.js 是一个轻量级的JavaScript库，专为实现打字机效果而设计。它可以让你的文字一个字一个字地出现，就像是在使用打字机一样。这为网页增添了一种生动而有趣的交互方式，使用户体验更加丰富。
2. 安装Typed.js
使用Typed.js非常简单，你只需要在你的项目中引入相关的库文件。你可以通过CDN引入，也可以将其下载到本地并引入。下面是通过CDN引入的示例：
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
配合 Vite/Webpack 等构建工具一起使用，使用 npm/yarn 进行安装。
# npm 安装
npm install typed.js
# 或
# yarn 安装
yarn add typed.js
3. 基本用法
使用Typed.js，你只需在HTML文件中准备一个用于显示文字的容器，然后在JavaScript 中初始化Typed 实例。以下是一个简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typed.js Demo</title>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
</head>
<body>
<div id="typed-output"></div>
<script>
var options = {
strings: ["你好，小伙伴", "欢迎来到猿镇，我是镇长，lee", "很高兴，向你介绍 Typed.js"],
typeSpeed: 50,
backSpeed: 25,
loop: true
};
var typed = new Typed('#typed-output', options);
</script>
</body>
</html>
在这个例子中，我们创建了一个ID为"typed-output"的div元素，用于显示Typed.js 效果。在JavaScript 中，我们定义了一些选项，比如strings 表示要显示的文字数组，typeSpeed 是打字的速度，backSpeed 是删除文字的速度，loop 表示是否循环播放。
4. 高级用法
Typed.js 提供了许多高级的配置选项，以满足更复杂的需求。你可以通过回调函数、事件监听等方式来控制文字的显示与动画效果。以下是一个使用回调函数的例子：
var options = {
strings: ["你好，小伙伴", "欢迎来到猿镇，我是镇长，lee", "很高兴，向你介绍 Typed.js"],
typeSpeed: 50,
backSpeed: 25,
onComplete: function(self) {
console.log("动画完成");
}
};
在这个例子中，onComplete回调函数将在所有文字都显示完毕后触发。
其他的回调函数，参考：
• onBegin: 开始打字之前
• onComplete ：所有大致执行完成
• preStringTyped：在输入每个字符串之前，第一个参数是字符串在数组中的位置。
• onStringTyped：在输入每个字符串之后，第一个参数是字符串在数组中的位置。
• onLastStringBackspaced：循环期间，在输入最后一个字符串之后。
• onTypingPaused：输入暂停时，回调
• onTypingResumed ：暂停输入后，恢复输入
• onReset：重置后回调
• onStop：停止后回调
• onStart：开始后回调
• onDestroy：销毁时回调
5. 小结
Typed.js 是一个简单而强大的JavaScript 库，通过它，你可以为你的网页文本增加生动的打字机效果。无论你是刚刚开始学习前端开发，还是想要为项目增色添彩，Typed.js都是一个值得尝试的工具。希望通过本文的介绍，你能更好地理解并运用Typed.js，为你的网页带来更加出色的用户体验。
该文章在 2024/10/12 10:50:03 编辑过
400 186 1886
