typed.js
查看Demo | 查看所有Demo | 查看完整文档 | mattboldt.com
效果演示
typedJS.gif
typed.js是一个轻量级的JavaScript插件, 用于实现页面文字的打字动画效果，使用非常简单。
安装方式
选一个：
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>
创建
// 也可以包含在常规脚本标记中
import Typed from 'typed.js';
var options = {
strings: ["<i>First</i> sentence.", "& a second sentence."],
typeSpeed: 40
}
var typed = new Typed(".element", options);
为了静态html的seo友好
您可以在页面上放置HTML div并从中读取，而不是使用strings数组来插入字符串。这允许机器人、搜索引擎以及禁用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>
输入暂停
通过包含转义字符，您可以在字符串的中间停留一段给定的时间。
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 <head>
*/
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
案例示范
<!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 键入之前的时间以毫秒开始
*/
startDelay: 0,
/**
* @property {number} backSpeed 退格速度，以毫秒为单位
*/
backSpeed: 100,
/**
* @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 <head>
*/
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) => {
console.log('所有打字都已完成调用的回调函数', self);
},
/**
* 在键入每个字符串之前调用的回调函数
* @param {number} arrayPos
* @param {Typed} self
*/
preStringTyped: (arrayPos, self) => {
console.log('在键入每个字符串之前调用的回调函数', arrayPos, self);
},
/**
* 输入每个字符串后调用的回调函数
* @param {number} arrayPos
* @param {Typed} self
*/
onStringTyped: (arrayPos, self) => {
console.log('输入每个字符串后调用的回调函数', arrayPos, self);
},
/**
* 在循环期间，在键入最后一个字符串之后调用的回调函数
* @param {Typed} self
*/
onLastStringBackspaced: (self) => {
console.log('在循环期间，在键入最后一个字符串之后调用的回调函数', self);
},
/**
* 打字已经停止调用的回调函数
* @param {number} arrayPos
* @param {Typed} self
*/
onTypingPaused: (arrayPos, self) => {
console.log('打字已经停止调用的回调函数', arrayPos, self);
},
/**
* 停止后开始键入调用的回调函数
* @param {number} arrayPos
* @param {Typed} self
*/
onTypingResumed: (arrayPos, self) => {
console.log('停止后开始键入调用的回调函数', arrayPos, self);
},
/**
* 重置后调用的回调函数
* @param {Typed} self
*/
onReset: (self) => {
console.log('重置后调用的回调函数', self);
},
/**
* 停止后调用的回调函数
* @param {number} arrayPos
* @param {Typed} self
*/
onStop: (arrayPos, self) => {
console.log('停止后调用的回调函数', arrayPos, self);
},
/**
* 开始后调用的回调函数
* @param {number} arrayPos
* @param {Typed} self
*/
onStart: (arrayPos, self) => {
console.log('开始后调用的回调函数', arrayPos, self);
},
/**
* 销毁后调用的回调函数
* @param {Typed} self
*/
onDestroy: (self) => {
console.log('销毁后调用的回调函数', self);
}
});
}
</script>
</body>
</html>
最后
感谢作者的贡献，他的网站在这里：www.mattboldt.com
网友评论