在线演示 | 查看所有演示 | 查看完整文档 | mattboldt.com
Typed.js 是一个打字效果库。输入任何字符串,它将以您设定的速度打字,删除已打的内容,然后开始新的句子,可以设置任意数量的字符串。
安装
CDN
<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
直接在浏览器中通过 <script>
标签使用:
<!-- 包含动画打字效果的元素 -->
<span id="element"></span>
<!-- 从 CDN 加载库 -->
<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
<!-- 设置并启动动画! -->
<script>
var typed = new Typed('#element', {
strings: ['<i>第一</i>句。', '& 第二句。'],
typeSpeed: 50,
});
</script>
</body>
作为 ESModule 使用
使用构建工具如 Vite,和/或在 React 应用中,通过 NPM 或 Yarn 安装。
NPM
npm install typed.js
Yarn
yarn add typed.js
一般 ESM 用法
import Typed from 'typed.js';
const typed = new Typed('#element', {
strings: ['<i>第一</i>句。', '& 第二句。'],
typeSpeed: 50,
});
ReactJS 用法
import React from 'react';
import Typed from 'typed.js';
function MyComponent() {
// 创建引用以存储包含动画的 DOM 元素
const el = React.useRef(null);
React.useEffect(() => {
const typed = new Typed(el.current, {
strings: ['<i>第一</i>句。', '& 第二句。'],
typeSpeed: 50,
});
return () => {
// 在清理过程中销毁 Typed 实例以停止动画
typed.destroy();
};
}, []);
return (
<div className="App">
<span ref={el} />
</div>
);
}
更复杂的基于 Hook 的函数组件:https://jsfiddle.net/mattboldt/60h9an7y/
类组件:https://jsfiddle.net/mattboldt/ovat9jmp/
与 Vue.js 一起使用
查看 Vue.js 组件:https://github.com/Orlandster/vue-typed-js
作为 WebComponent 使用
查看 WebComponent:https://github.com/Orlandster/wc-typed-js
使用(或曾使用)Typed.js 的优秀网站
https://github.com/features/package-registry
http://testdouble.com/agency.html
https://www.capitalfactory.com
从静态 HTML 中获取字符串(对 SEO 友好)
除了使用 strings
数组插入字符串外,您还可以在页面上放置一个 HTML div
并从中读取内容。
这样可以让搜索引擎爬虫以及禁用 JavaScript 的用户在页面上看到您的文本。
<script>
var typed = new Typed('#typed', {
stringsElement: '#typed-strings'
});
</script>
<div id="typed-strings">
<p>Typed.js 是一个 <strong>JavaScript</strong> 库。</p>
<p>它可以<em>打出</em>句子。</p>
</div>
<span id="typed"></span>
打字暂停
您可以在字符串中间暂停指定的时间,只需包含一个转义字符。
var typed = new Typed('#element', {
// 在打出 "First" 后等待 1000 毫秒
strings: ['第一 ^1000 句。', '第二句。'],
});
智能退格
在下面的例子中,它只会退格 "This is a" 之后的单词
var typed = new Typed('#element', {
strings: ['这是一个JavaScript库', '这是一个ES6模块'],
smartBackspace: true, // 默认值
});
批量打字
以下示例将模拟终端在输入命令并查看其结果时的行为。
var typed = new Typed('#element', {
strings: ['git push --force ^1000\n `使用force选项推送到origin`'],
});
CSS
CSS动画在JavaScript初始化时构建。但是,你可以随意自定义它们!这些类包括:
/* 光标 */
.typed-cursor {
}
/* 如果设置了淡出选项 */
.typed-fade-out {
}
自定义
var typed = new Typed('#element', {
/**
* @property {array} strings 要输入的字符串数组
* @property {string} stringsElement 包含字符串子元素的元素ID
*/
strings: [
'这些是默认值...',
'你知道你应该做什么吗?',
'使用你自己的!',
'祝你有个愉快的一天!',
],
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 将光标和淡出的CSS插入HTML的<head>中
*/
showCursor: true,
cursorChar: '|',
autoInsertCss: true,
/**
* @property {string} attr 用于输入的属性
* 例如:输入框的placeholder、value或普通HTML文本
*/
attr: null,
/**
* @property {boolean} bindInputFocusEvents 如果元素是文本输入框,绑定焦点和失焦事件
*/
bindInputFocusEvents: false,
/**
* @property {string} contentType 'html'或'null'表示纯文本
*/
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) => {},
});
贡献
查看贡献指南
结束
感谢你关注这个项目。如果你有任何问题,我会在Twitter上。
如果你正在使用这个项目,请告诉我!我很想看看。
如果你能在某处提及我或我的网站,那就太棒了。www.mattboldt.com