js 实现打字效果的js库 typed.js
最近在做一些好玩的小玩意。研究了一下这个库 还挺好用，效果确实挺酷炫。水一篇博文。
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/typed.js@2.0.11"></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) => {}
});
