Vue3 神級(jí)工具：終于可以實(shí)現(xiàn)打字的動(dòng)畫(huà)效果了！
作者：林三心不學(xué)挖掘機(jī)
Typed.js 是一個(gè)輕量級(jí)的 JavaScript 庫(kù)，它支持自定義打字速度、循環(huán)模式、回調(diào)函數(shù)等，非常適合用于動(dòng)態(tài)展示標(biāo)語(yǔ)、代碼片段或交互式文本效果。
Typed.js 是一個(gè)輕量級(jí)的 JavaScript 庫(kù)，用于在網(wǎng)頁(yè)上實(shí)現(xiàn)打字機(jī)動(dòng)畫(huà)效果。它支持自定義打字速度、循環(huán)模式、回調(diào)函數(shù)等，非常適合用于動(dòng)態(tài)展示標(biāo)語(yǔ)、代碼片段或交互式文本效果。
核心特性
- 打字動(dòng)畫(huà)：模擬逐字輸入和刪除的效果。
- 高度可配置：調(diào)整速度、循環(huán)次數(shù)、光標(biāo)樣式等。
- 回調(diào)函數(shù)：在動(dòng)畫(huà)開(kāi)始、結(jié)束或每次循環(huán)時(shí)觸發(fā)自定義邏輯。
- 無(wú)依賴(lài)：純 JavaScript 實(shí)現(xiàn)，無(wú)需 jQuery 或其他庫(kù)。
基礎(chǔ)用法示例
<!DOCTYPE html>
<html>
<head>
<!-- 引入 Typed.js -->
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
</head>
<body>
<!-- 定義一個(gè)展示動(dòng)畫(huà)的容器 -->
<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 實(shí)例，綁定到 HTML 元素
const typed = new Typed('#typed-text', options);
});
</script>
</body>
</html>進(jìn)階配置示例
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, // 開(kāi)始前的延遲
backDelay: 1500, // 刪除后的停頓
smartBackspace: true, // 智能刪除（匹配上一段文字）
showCursor: true, // 顯示光標(biāo)
cursorChar: '|', // 自定義光標(biāo)符號(hào)
loopCount: 3, // 循環(huán)次數(shù)（Infinity 表示無(wú)限）
// 回調(diào)函數(shù)
onComplete: (self) => {
console.log('動(dòng)畫(huà)完成！', self);
},
preStringTyped: (pos, self) => {
console.log(`開(kāi)始輸入第 ${pos + 1} 段文字`);
}
});關(guān)鍵配置項(xiàng)說(shuō)明
責(zé)任編輯：趙寧寧
來(lái)源：
前端之神
