js 實現打字效果的js庫 typed.js
阿新 • • 發佈：2020-12-16
最近在做一些好玩的小玩意。研究了一下這個庫 還挺好用，效果確實挺酷炫。水一篇博文。
github : https://github.com/mattboldt/typed.js/
bootcdn : https://www.bootcdn.cn/typed.js/
本文基於最新版本 V2.0.11
github releases : https://github.com/mattboldt/typed.js/releases/tag/v2.0.11
Typed.js 是一個模仿輸入的庫。
輸入一些字串，看它以您設定的速度鍵入，將鍵入的內容退格，並以你設定的任意字串開始一個新的句子。
使用可選以下方式：
npm install typed.js yarn add typed.js bower install typed.js CDN <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
開始使用
你需要的僅僅是這樣
//也可以包含在正則指令碼標記中
import Typed from 'typed.js';
var options = {
strings: ['<i>First</i> sentence.', '& a second sentence.'],
typeSpeed: 40
};
var typed = new Typed('.element', options);
使用了 Typed.js 庫的精彩網站：
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 友好）
您可以在頁面上放置一個htmldiv並從中讀取，而不是使用strings陣列插入字串。這允許搜尋引擎的爬蟲和禁用 JavaScript 的使用者在頁面上看到您的文字。
<script>
var typed = new Typed('#typed', {
stringsElement: '#typed-strings'
});
</script>
<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>
暫停打字效果
通過包含轉義符，可以在模擬輸出的時候暫停一定時間。
var typed = new Typed('.element', {
// Waits 1000ms after typing "First"
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初始化的基礎上構建的。但是，你可以根據自己的意願定製它們。
/* Cursor
.typed-cursor {
}
/* If fade out option is set
.typed-fade-out {
}
與 ReactJS 一起使用 https://jsfiddle.net/mattboldt/ovat9jmp/
與 Vue 一起使用 https://github.com/Orlandster/vue-typed-js
作為 Web 元件使用 https://github.com/Orlandster/wc-typed-js
配置
var typed = new Typed('.element', {
//屬性 {array} strings 需要輸出的字串們
//屬性 {string} 包含字串的HTML標籤ID
strings: [
'These are the default values...',
'You know what you should do?',
'Use your own!',
'Have a great day!'
],
stringsElement: null,
//屬性 {number} 打字型別速度（毫秒）
typeSpeed: 0,
//屬性 {number} 開始鍵入前的延遲時間（毫秒）
startDelay: 0,
//屬性 {number} 後退速度（毫秒）
backSpeed: 0,
//屬性 {boolean} 智慧退格，僅退格與前一個字串不匹配的內容
smartBackspace: true,
//屬性 {boolean} 隨機輸出
shuffle: false,
//屬性 {number} 退格前的延遲時間（毫秒）
backDelay: 700,
//屬性 {boolean} 淡入淡出而不是退格
//屬性 {string} 淡入動畫css類
//屬性 {boolean} 淡出延遲淡出延遲（毫秒）
fadeOut: false,
fadeOutClass: 'typed-fade-out',
fadeOutDelay: 500,
//屬性 {boolean} 迴圈所有字串
//屬性 {number} 迴圈次數
loop: false,
loopCount: Infinity,
//屬性 {boolean} 顯示游標
//屬性 {string} 游標
//屬性 {boolean} 為游標插入淡入淡出CSS到HTML<head>
showCursor: true,
cursorChar: '|',
autoInsertCss: true,
//屬性 {string} attr屬性用於鍵入
//例如：輸入佔位符、值或僅輸入HTML文字
attr: null,
//屬性 {boolean} 如果el是文字輸入，繫結輸入焦點事件
bindInputFocusEvents: false,
//屬性 {string} “html”或“zero”表示純文字
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) => {}
});