typed.js

在线演示 | 查看所有演示 | 查看完整文档 | mattboldt.com

Typed.js 是一个打字效果库。输入任何字符串，它将以您设定的速度打字，删除已打的内容，然后开始新的句子，可以设置任意数量的字符串。

安装

CDN

<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>

直接在浏览器中通过 <script> 标签使用：

  <!-- 包含动画打字效果的元素 -->
  <span id="element"></span>

  <!-- 从 CDN 加载库 -->
  <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>

  <!-- 设置并启动动画！ -->
  <script>
    var typed = new Typed('#element', {
      strings: ['<i>第一</i>句。', '&amp; 第二句。'],
      typeSpeed: 50,
    });
  </script>
</body>

作为 ESModule 使用

使用构建工具如 Vite，和/或在 React 应用中，通过 NPM 或 Yarn 安装。

NPM

npm install typed.js

Yarn

yarn add typed.js

一般 ESM 用法

import Typed from 'typed.js';

const typed = new Typed('#element', {
  strings: ['<i>第一</i>句。', '&amp; 第二句。'],
  typeSpeed: 50,
});

ReactJS 用法

import React from 'react';
import Typed from 'typed.js';

function MyComponent() {
  // 创建引用以存储包含动画的 DOM 元素
  const el = React.useRef(null);

  React.useEffect(() => {
    const typed = new Typed(el.current, {
      strings: ['<i>第一</i>句。', '&amp; 第二句。'],
      typeSpeed: 50,
    });

    return () => {
      // 在清理过程中销毁 Typed 实例以停止动画
      typed.destroy();
    };
  }, []);

  return (
    <div className="App">
      <span ref={el} />
    </div>
  );
}

更复杂的基于 Hook 的函数组件：https://jsfiddle.net/mattboldt/60h9an7y/

类组件：https://jsfiddle.net/mattboldt/ovat9jmp/

与 Vue.js 一起使用

查看 Vue.js 组件：https://github.com/Orlandster/vue-typed-js

作为 WebComponent 使用

查看 WebComponent：https://github.com/Orlandster/wc-typed-js

使用（或曾使用）Typed.js 的优秀网站

https://forwardemail.net

https://codesignal.com

https://github.com/features/package-registry

https://slack.com

https://envato.com

https://gorails.com

https://productmap.co

https://www.typed.com

https://apeiron.io

https://git.market

https://commando.io

http://testdouble.com/agency.html

https://www.capitalfactory.com

http://www.maxcdn.com

https://www.powerauth.com

从静态 HTML 中获取字符串（对 SEO 友好）

除了使用 strings 数组插入字符串外，您还可以在页面上放置一个 HTML div 并从中读取内容。这样可以让搜索引擎爬虫以及禁用 JavaScript 的用户在页面上看到您的文本。

<script>
  var typed = new Typed('#typed', {
    stringsElement: '#typed-strings'
  });
</script>

<div id="typed-strings">
  <p>Typed.js 是一个 <strong>JavaScript</strong> 库。</p>
  <p>它可以<em>打出</em>句子。</p>
</div>
<span id="typed"></span>

打字暂停

您可以在字符串中间暂停指定的时间，只需包含一个转义字符。

var typed = new Typed('#element', {
  // 在打出 "First" 后等待 1000 毫秒
  strings: ['第一 ^1000 句。', '第二句。'],
});

智能退格

在下面的例子中，它只会退格 "This is a" 之后的单词

var typed = new Typed('#element', {
  strings: ['这是一个JavaScript库', '这是一个ES6模块'],
  smartBackspace: true, // 默认值
});

批量打字

以下示例将模拟终端在输入命令并查看其结果时的行为。

var typed = new Typed('#element', {
  strings: ['git push --force ^1000\n `使用force选项推送到origin`'],
});

CSS

CSS动画在JavaScript初始化时构建。但是，你可以随意自定义它们！这些类包括：

/* 光标 */
.typed-cursor {
}

/* 如果设置了淡出选项 */
.typed-fade-out {
}

自定义

var typed = new Typed('#element', {
  /**
   * @property {array} strings 要输入的字符串数组
   * @property {string} stringsElement 包含字符串子元素的元素ID
   */
  strings: [
    '这些是默认值...',
    '你知道你应该做什么吗？',
    '使用你自己的！',
    '祝你有个愉快的一天！',
  ],
  stringsElement: null,

  /**
   * @property {number} typeSpeed 输入速度（毫秒）
   */
  typeSpeed: 0,

  /**
   * @property {number} startDelay 开始输入前的延迟时间（毫秒）
   */
  startDelay: 0,

  /**
   * @property {number} backSpeed 退格速度（毫秒）
   */
  backSpeed: 0,

  /**
   * @property {boolean} smartBackspace 只退格不匹配前一个字符串的部分
   */
  smartBackspace: true,

  /**
   * @property {boolean} shuffle 打乱字符串顺序
   */
  shuffle: false,

  /**
   * @property {number} backDelay 退格前的延迟时间（毫秒）
   */
  backDelay: 700,

  /**
   * @property {boolean} fadeOut 使用淡出而不是退格
   * @property {string} fadeOutClass 淡出动画的CSS类
   * @property {boolean} fadeOutDelay 淡出延迟时间（毫秒）
   */
  fadeOut: false,
  fadeOutClass: 'typed-fade-out',
  fadeOutDelay: 500,

  /**
   * @property {boolean} loop 循环字符串
   * @property {number} loopCount 循环次数
   */
  loop: false,
  loopCount: Infinity,

  /**
   * @property {boolean} showCursor 显示光标
   * @property {string} cursorChar 光标字符
   * @property {boolean} autoInsertCss 将光标和淡出的CSS插入HTML的<head>中
   */
  showCursor: true,
  cursorChar: '|',
  autoInsertCss: true,

  /**
   * @property {string} attr 用于输入的属性
   * 例如：输入框的placeholder、value或普通HTML文本
   */
  attr: null,

  /**
   * @property {boolean} bindInputFocusEvents 如果元素是文本输入框，绑定焦点和失焦事件
   */
  bindInputFocusEvents: false,

  /**
   * @property {string} contentType 'html'或'null'表示纯文本
   */
  contentType: 'html',

  /**
   * 开始输入前
   * @param {Typed} self
   */
  onBegin: (self) => {},

  /**
   * 所有输入完成
   * @param {Typed} self
   */
  onComplete: (self) => {},

  /**
   * 每个字符串输入前
   * @param {number} arrayPos
   * @param {Typed} self
   */
  preStringTyped: (arrayPos, self) => {},

  /**
   * 每个字符串输入后
   * @param {number} arrayPos
   * @param {Typed} self
   */
  onStringTyped: (arrayPos, self) => {},

  /**
   * 循环时，最后一个字符串退格后
   * @param {Typed} self
   */
  onLastStringBackspaced: (self) => {},

  /**
   * 输入已暂停
   * @param {number} arrayPos
   * @param {Typed} self
   */
  onTypingPaused: (arrayPos, self) => {},

  /**
   * 暂停后输入已恢复
   * @param {number} arrayPos
   * @param {Typed} self
   */
  onTypingResumed: (arrayPos, self) => {},

  /**
   * 重置后
   * @param {Typed} self
   */
  onReset: (self) => {},

  /**
   * 停止后
   * @param {number} arrayPos
   * @param {Typed} self
   */
  onStop: (arrayPos, self) => {},

  /**
   * 开始后
   * @param {number} arrayPos
   * @param {Typed} self
   */
  onStart: (arrayPos, self) => {},

  /**
   * 销毁后
   * @param {Typed} self
   */
  onDestroy: (self) => {},
});