一款讓文字動起來的 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
