Vue3 神级工具:终于可以实现打字的动画效果了!

boyanx1个月前 (06-25)技术教程5

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