一个简单而强大的原生JavaScript插件,用于实现酷炫的打字机效果。
你可以使用该插件的 CDN 版本,快速轻松完成设置。
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>只需一条命令即可安装 Typewriterjs,然后就可以直接使用了
# with npm
npm i typewriter-effect
# with yarn
yarn add typewriter-effect
你需要先打包 JavaScript 才能使用它,开发时可以使用 npm run build:dev,生产环境则使用 npm run build:prod。
这是打字机效果的基础版本。它需要打包后的 JavaScript 版本才能正常工作。
请参阅 'examples' 文件夹中的示例。
import Typewriter from 'typewriter-effect/dist/core';
new Typewriter('#typewriter', {
strings: ['Hello', 'World'],
autoStart: true,
});| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| strings | String 或 Array | null | 使用 autoStart 选项时要打出的字符串 |
| Cursor | String | 管道字符 | 用作 Cursor 的字符串值。 |
| delay | 'natural' 或 Number | 'natural' | 打字时每个按键之间的延迟。 |
| deleteSpeed | 'natural' 或 Number | 'natural' | 删除每个字符之间的延迟。 |
| loop | Boolean | false | 是否持续循环。 |
| autoStart | Boolean | false | 是否自动开始打字字符串。您需要提供 strings 选项。 |
| pauseFor | Number | 1500 | 在自动启动模式下,打完一个字符串后的暂停时长 |
| devMode | Boolean | false | 是否显示控制台日志。 |
| skipAddStyles | Boolean | 跳过添加默认打字机 CSS 样式。 | |
| wrapperClassName | String | 'Typewriter__wrapper' | 包装元素的类名。 |
| cursorClassName | String | 'Typewriter__cursor' | Cursor 元素的类名。 |
| stringSplitter | Function | 字符串分割函数,可用于分割表情符号 |
暂无开放 Issues,或尚未同步最近议题。