Vue3 神級工具：終于可以實現(xiàn)打字的動畫效果了！
作者：林三心不學(xué)挖掘機
Typed.js 是一個輕量級的 JavaScript 庫，它支持自定義打字速度、循環(huán)模式、回調(diào)函數(shù)等，非常適合用于動態(tài)展示標(biāo)語、代碼片段或交互式文本效果。
Typed.js 是一個輕量級的 JavaScript 庫，用于在網(wǎng)頁上實現(xiàn)打字機動畫效果。它支持自定義打字速度、循環(huán)模式、回調(diào)函數(shù)等，非常適合用于動態(tài)展示標(biāo)語、代碼片段或交互式文本效果。
核心特性
- 打字動畫：模擬逐字輸入和刪除的效果。
- 高度可配置：調(diào)整速度、循環(huán)次數(shù)、光標(biāo)樣式等。
- 回調(diào)函數(shù)：在動畫開始、結(jié)束或每次循環(huán)時觸發(fā)自定義邏輯。
- 無依賴：純 JavaScript 實現(xiàn)，無需 jQuery 或其他庫。
基礎(chǔ)用法示例
<!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>
// 當(dāng) DOM 加載完成后初始化
document.addEventListener('DOMContentLoaded', function () {
// 配置參數(shù)
const options = {
strings: ["Hello World!", "歡迎使用 Typed.js", "Typing Effect ??"], // 要顯示的文本數(shù)組
typeSpeed: 100, // 打字速度（毫秒）
backSpeed: 50, // 回刪速度
loop: true // 是否循環(huán)
};
// 初始化 Typed 實例，綁定到 HTML 元素
const typed = new Typed('#typed-text', options);
});
</script>
</body>
</html>進階配置示例
const typed = new Typed('#typed-element', {
strings: [
'第一段文字',
'第二段文字 <strong>支持 HTML 標(biāo)簽</strong>', // 支持內(nèi)嵌 HTML
'甚至可以嵌入圖標(biāo) <i class="fa fa-smile"></i>'
],
typeSpeed: 40, // 打字速度
backSpeed: 20, // 回刪速度
startDelay: 500, // 開始前的延遲
backDelay: 1500, // 刪除后的停頓
smartBackspace: true, // 智能刪除（匹配上一段文字）
showCursor: true, // 顯示光標(biāo)
cursorChar: '|', // 自定義光標(biāo)符號
loopCount: 3, // 循環(huán)次數(shù)（Infinity 表示無限）
// 回調(diào)函數(shù)
onComplete: (self) => {
console.log('動畫完成！', self);
},
preStringTyped: (pos, self) => {
console.log(`開始輸入第 ${pos + 1} 段文字`);
}
});關(guān)鍵配置項說明
責(zé)任編輯：趙寧寧
來源：
前端之神
