[typed.js]-JavaScript打字動(dòng)畫庫

typed.js

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

效果演示

typedJS.gif

typed.js是一個(gè)輕量級(jí)的JavaScript插件, 用于實(shí)現(xiàn)頁面文字的打字動(dòng)畫效果，使用非常簡單。

安裝方式

選一個(gè)：
npm install typed.js
yarn add typed.js
bower install typed.js
CDN:
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>
創(chuàng)建
// 也可以包含在常規(guī)腳本標(biāo)記中
import Typed from 'typed.js';

var options = {
  strings: ["<i>First</i> sentence.", "&amp; a second sentence."],
  typeSpeed: 40
}

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

為了靜態(tài)html的seo友好

您可以在頁面上放置HTML div并從中讀取，而不是使用strings數(shù)組來插入字符串。這允許機(jī)器人、搜索引擎以及禁用JavaScript的用戶，在頁面上查看您的文本。

html：

<div id="typed-strings">
    <p>Typed.js is a <strong>JavaScript</strong> library.</p>
    <p>It <em>types</em> out sentences.</p>
</div>
<span id="typed"></span>

js:

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

輸入暫停

通過包含轉(zhuǎn)義字符，您可以在字符串的中間停留一段給定的時(shí)間。

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

智能退格

在下面的示例中，這只會(huì)在“This is a”之后退格。

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

批量打字

以下示例將模擬終端在鍵入命令并查看其結(jié)果時(shí)的行為方式。

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

CSS

CSS動(dòng)畫是在JavaScript中初始化時(shí)構(gòu)建的。但是，您可以隨意自定義它們！這些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 鍵入之前的時(shí)間以毫秒開始
   */
  startDelay: 0,

  /**
   * @property {number} backSpeed 退格速度，以毫秒為單位
   */
  backSpeed: 0,

  /**
   * @property {boolean} smartBackspace 是否只退格與前一個(gè)字符串不匹配的內(nèi)容
   */
  smartBackspace: true,

  /**
   * @property {boolean} shuffle 是否洗牌
   */
  shuffle: false,

  /**
   * @property {number} backDelay 退回之前的時(shí)間，以毫秒為單位
   */
  backDelay: 700,

  /**
   * @property {boolean} fadeOut 是否用淡出替代空格
   * @property {string} fadeOutClass 用于淡入淡出動(dòng)畫的css類
   * @property {boolean} fadeOutDelay 以毫秒為單位淡出延遲
   */
  fadeOut: false,
  fadeOutClass: 'typed-fade-out',
  fadeOutDelay: 500,

  /**
   * @property {boolean} loop 是否循環(huán)字符串
   * @property {number} loopCount 循環(huán)次數(shù)
   */
  loop: false,
  loopCount: Infinity,

  /**
   * @property {boolean} showCursor 是否顯示光標(biāo)
   * @property {string} cursorChar 光標(biāo)的字符
   * @property {boolean} autoInsertCss 是否將光標(biāo)和fadeOut的CSS插入HTML <head>
   */
  showCursor: true,
  cursorChar: '|',
  autoInsertCss: true,

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

  /**
   * @property {boolean} bindInputFocusEvents 如果el是文本輸入，則綁定到焦點(diǎn)和模糊
   */
  bindInputFocusEvents: false,

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

  /**
   * 所有打字都已完成調(diào)用的回調(diào)函數(shù)
   * @param {Typed} self
   */
  onComplete: (self) => {},

  /**
   * 在鍵入每個(gè)字符串之前調(diào)用的回調(diào)函數(shù)
   * @param {number} arrayPos
   * @param {Typed} self
   */
  preStringTyped: (arrayPos, self) => {},

  /**
   * 輸入每個(gè)字符串后調(diào)用的回調(diào)函數(shù)
   * @param {number} arrayPos
   * @param {Typed} self
   */
  onStringTyped: (arrayPos, self) => {},

  /**
   * 在循環(huán)期間，在鍵入最后一個(gè)字符串之后調(diào)用的回調(diào)函數(shù)
   * @param {Typed} self
   */
  onLastStringBackspaced: (self) => {},

  /**
   * 打字已經(jīng)停止調(diào)用的回調(diào)函數(shù)
   * @param {number} arrayPos
   * @param {Typed} self
   */
  onTypingPaused: (arrayPos, self) => {},

  /**
   * 停止后開始鍵入調(diào)用的回調(diào)函數(shù)
   * @param {number} arrayPos
   * @param {Typed} self
   */
  onTypingResumed: (arrayPos, self) => {},

  /**
   * 重置后調(diào)用的回調(diào)函數(shù)
   * @param {Typed} self
   */
  onReset: (self) => {},

  /**
   * 停止后調(diào)用的回調(diào)函數(shù)
   * @param {number} arrayPos
   * @param {Typed} self
   */
  onStop: (arrayPos, self) => {},

  /**
   * 開始后調(diào)用的回調(diào)函數(shù)
   * @param {number} arrayPos
   * @param {Typed} self
   */
  onStart: (arrayPos, self) => {},

  /**
   * 銷毀后調(diào)用的回調(diào)函數(shù)
   * @param {Typed} self
   */
  onDestroy: (self) => {}
});

貢獻(xiàn)代碼

View Contribution Guidelines

案例示范

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>
  </head>
  <body>
    <div class="element"></div>

    <script type="text/javascript">
      window.onload = function () {
        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: 100,

          /**
           * @property {number} startDelay 鍵入之前的時(shí)間以毫秒開始
           */
          startDelay: 0,

          /**
           * @property {number} backSpeed 退格速度，以毫秒為單位
           */
          backSpeed: 100,

          /**
           * @property {boolean} smartBackspace 是否只退格與前一個(gè)字符串不匹配的內(nèi)容
           */
          smartBackspace: true,

          /**
           * @property {boolean} shuffle 是否洗牌
           */
          shuffle: false,

          /**
           * @property {number} backDelay 退回之前的時(shí)間，以毫秒為單位
           */
          backDelay: 700,

          /**
           * @property {boolean} fadeOut 是否用淡出替代空格
           * @property {string} fadeOutClass 用于淡入淡出動(dòng)畫的css類
           * @property {boolean} fadeOutDelay 以毫秒為單位淡出延遲
           */
          fadeOut: false,
          fadeOutClass: 'typed-fade-out',
          fadeOutDelay: 500,

          /**
           * @property {boolean} loop 是否循環(huán)字符串
           * @property {number} loopCount 循環(huán)次數(shù)
           */
          loop: false,
          loopCount: Infinity,

          /**
           * @property {boolean} showCursor 是否顯示光標(biāo)
           * @property {string} cursorChar 光標(biāo)的字符
           * @property {boolean} autoInsertCss 是否將光標(biāo)和fadeOut的CSS插入HTML <head>
           */
          showCursor: true,
          cursorChar: '|',
          autoInsertCss: true,

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

          /**
           * @property {boolean} bindInputFocusEvents 如果el是文本輸入，則綁定到焦點(diǎn)和模糊
           */
          bindInputFocusEvents: false,

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

          /**
           * 所有打字都已完成調(diào)用的回調(diào)函數(shù)
           * @param {Typed} self
           */
          onComplete: (self) => {
            console.log('所有打字都已完成調(diào)用的回調(diào)函數(shù)', self);
          },

          /**
           * 在鍵入每個(gè)字符串之前調(diào)用的回調(diào)函數(shù)
           * @param {number} arrayPos
           * @param {Typed} self
           */
          preStringTyped: (arrayPos, self) => {
            console.log('在鍵入每個(gè)字符串之前調(diào)用的回調(diào)函數(shù)', arrayPos, self);
          },

          /**
           * 輸入每個(gè)字符串后調(diào)用的回調(diào)函數(shù)
           * @param {number} arrayPos
           * @param {Typed} self
           */
          onStringTyped: (arrayPos, self) => {
            console.log('輸入每個(gè)字符串后調(diào)用的回調(diào)函數(shù)', arrayPos, self);
          },

          /**
           * 在循環(huán)期間，在鍵入最后一個(gè)字符串之后調(diào)用的回調(diào)函數(shù)
           * @param {Typed} self
           */
          onLastStringBackspaced: (self) => {
            console.log('在循環(huán)期間，在鍵入最后一個(gè)字符串之后調(diào)用的回調(diào)函數(shù)', self);
          },

          /**
           * 打字已經(jīng)停止調(diào)用的回調(diào)函數(shù)
           * @param {number} arrayPos
           * @param {Typed} self
           */
          onTypingPaused: (arrayPos, self) => {
            console.log('打字已經(jīng)停止調(diào)用的回調(diào)函數(shù)', arrayPos, self);
          },

          /**
           * 停止后開始鍵入調(diào)用的回調(diào)函數(shù)
           * @param {number} arrayPos
           * @param {Typed} self
           */
          onTypingResumed: (arrayPos, self) => {
            console.log('停止后開始鍵入調(diào)用的回調(diào)函數(shù)', arrayPos, self);
          },

          /**
           * 重置后調(diào)用的回調(diào)函數(shù)
           * @param {Typed} self
           */
          onReset: (self) => {
            console.log('重置后調(diào)用的回調(diào)函數(shù)', self);
          },

          /**
           * 停止后調(diào)用的回調(diào)函數(shù)
           * @param {number} arrayPos
           * @param {Typed} self
           */
          onStop: (arrayPos, self) => {
            console.log('停止后調(diào)用的回調(diào)函數(shù)', arrayPos, self);
          },

          /**
           * 開始后調(diào)用的回調(diào)函數(shù)
           * @param {number} arrayPos
           * @param {Typed} self
           */
          onStart: (arrayPos, self) => {
            console.log('開始后調(diào)用的回調(diào)函數(shù)', arrayPos, self);
          },

          /**
           * 銷毀后調(diào)用的回調(diào)函數(shù)
           * @param {Typed} self
           */
          onDestroy: (self) => {
            console.log('銷毀后調(diào)用的回調(diào)函數(shù)', self);
          }
        });
      }
    </script>
  </body>
</html>

最后

感謝作者的貢獻(xiàn)，他的網(wǎng)站在這里：www.mattboldt.com

提示：后面還有精彩敬請(qǐng)期待，請(qǐng)大家關(guān)注我的專題：web前端。如有意見可以進(jìn)行評(píng)論，每一條評(píng)論我都會(huì)認(rèn)真對(duì)待。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容