Vue3 神級工具：終于可以實現打字的動畫效果了！

作者：林三心不學挖掘機 2025-06-17 09:21:13

Typed.js 是一個輕量級的 JavaScript 庫，它支持自定義打字速度、循環模式、回調函數等，非常適合用于動態展示標語、代碼片段或交互式文本效果。

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} 段文字`);
  }
});

關鍵配置項說明

責任編輯：趙寧寧來源：前端之神

Typed.js JavaScrip 庫 Vue3