typed.js

查看Demo | 查看所有Demo | 查看完整文档 | mattboldt.com

效果演示

typedJS.gif

typed.js是一个轻量级的JavaScript插件, 用于实现页面文字的打字动画效果，使用非常简单。

安装方式

选一个：

npm install typed.js
yarn add typed.js
bower install typed.js

CDN:

创建

// 也可以包含在常规脚本标记中
import Typed from 'typed.js';

var options = {
  strings: ["First sentence.", "& a second sentence."],
  typeSpeed: 40
}

var typed = new Typed(".element", options);

为了静态html的seo友好

您可以在页面上放置HTML div并从中读取，而不是使用strings数组来插入字符串。这允许机器人、搜索引擎以及禁用JavaScript的用户，在页面上查看您的文本。

html：


    Typed.js is a JavaScript library.
    It types out sentences.

js:

输入暂停

通过包含转义字符，您可以在字符串的中间停留一段给定的时间。

var typed = new Typed(".element", {
  // 键入“first”后等待1000毫秒
  strings: ["First ^1000 sentence.", "Second sentence."]
});

智能退格

在下面的示例中，这只会在“This is a”之后退格。

// 只退格与前一个字符串不匹配的内容
var typed = new Typed(".element", {
  strings: ["This is a JavaScript library", "This is an ES6 module"],
  smartBackspace: true // Default value
});

批量打字

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

var typed = new Typed(".element", {
  strings: [
    "git push --force ^1000\n `pushed to origin with option force`"
  ]
});

CSS

CSS动画是在JavaScript中初始化时构建的。但是，您可以随意自定义它们！这些class是：

/* Cursor */
.typed-cursor {}

/* If fade out option is set */
.typed-fade-out {}

与ReactJS一起使用

查看此示例在组件中使用Typed.js的React app: https://jsfiddle.net/mattboldt/ovat9jmp/

与VUE一起使用

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

将其用作WebComponent

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

定制

var typed = new Typed(".element", {
  /**
   * @property {array} strings 要键入的字符串
   * @property {string} stringsElement 包含字符串子元素的元素的ID
   */
  strings: ['These are the default values...', 'You know what you should do?', 'Use your own!', 'Have a great day!'],
  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 是否将光标和fadeOut的CSS插入HTML 
   */
  showCursor: true,
  cursorChar: '|',
  autoInsertCss: true,

  /**
   * @property {string} attr 输入属性
   * 例如：输入占位符，值或仅HTML文本
   */
  attr: null,

  /**
   * @property {boolean} bindInputFocusEvents 如果el是文本输入，则绑定到焦点和模糊
   */
  bindInputFocusEvents: false,

  /**
   * @property {string} contentType 明文的'html'或'null'
   */
  contentType: 'html',

  /**
   * 所有打字都已完成调用的回调函数
   * @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) => {}
});

贡献代码

View Contribution Guidelines

案例示范

最后

感谢作者的贡献，他的网站在这里：www.mattboldt.com

提示：后面还有精彩敬请期待，请大家关注我的专题：web前端。如有意见可以进行评论，每一条评论我都会认真对待。

[typed.js]-JavaScript打字动画库