acmenlei / typenet

Web typewriter effect with support for chain calls.

typenet

中文 | English

介绍

实现 web 打字机效果，支持链式调用，使用简单方便，详情你可以查看在线演示.

使用

下载

npm

npm install typenet

pnpm

pnpm install typenet

yarn

yarn add typenet

在项目中使用

基本使用

import Typenet from "typenet"

new Typenet("#app", [options])
  .sleep(300)
  .type("I am a web ", [options])
  .sleep(300)
  .type("typing", { style: "color: red;" })
  .type(" plugin.")
  .start()

options 参数介绍

property name	type	default value	meaning
speed	number	100	单位为毫秒，用于控制文本的速度，如打字速度、移动速度等.
style	string	none	编写格式与 DOM 元素中的 style 写法保持一致

API 介绍

在构造函数(Typenet)中配置的options将被视为公共的，若调用API时不传入options那么将使用构造函数中的options. 最后请调用start方法启动整个流程. 目前支持 remove、type、sleep、start、move、line 等方法的链式调用，持续维护...

type

输出文字，type(text: string, [options])

new Typenet("#app", [options]).type("i am typenet!").start()

remove

删除文字内容，remove(characters: number, [options])

new Typenet("#app", [options])
  .type("i am typenet!")
  .remove(1) // 删除一个字符 最终得到 "i am typenet"
  .start()

move

移动光标所在位置，move(characters: number, [options])，characters可为正数（向右移动）和负数（向左移动）.

new Typenet("#app", [options]).type("i am typenet!").move(5).start()

sleep

停止输出文字，sleep(time: number)，参数为毫秒.

new Typenet("#app", [options])
  .sleep(2000)
  .type("i am typenet!") // 将等待两秒后输出
  .start()

line

换行，line().

new Typenet("#app", [options])
  .sleep(2000)
  .type("i am typenet!") // 将等待两秒后输出
  .line()
  .type("thank you!") // 将换行继续输出此输出
  .start()

常见问题

todo...

参与贡献

贡献之前请先阅读贡献指南

赞助

如果你觉得这个项目对你有帮助，并且情况允许的话，可以给我一点点支持，总之非常感谢支持～

WeChat

Alipay

License

MIT © coderlei