用于“自动键入文本”的JavaScript库

JavaScript自动输入效果

👻不,您的键盘不是鬼或Dennis Nedry所拥有的。

typing自键入文本效果给人一种自动化感,使您可以将许多想法共享同一空间但在不同时间time第四维黑客。


让我们看一下其中的一些

键入效果完全可以在HTML中配置

Typer使用HTML5数据属性来配置字体效果。 您可以更改键入速度和延迟,但是在键入时将保持一致(其他使用随机时间来模拟人类键入),调整颜色,光标以及设置按钮以开始和停止键入。

从https://steven.codes/typerjs/docs/index.html提取的代码

主脚本非常轻巧(3.4 K),但缺少其他替代方法中的许多功能。 您可以从开发者站点下载它,而没有CDN选项。 在这里尝试Typer.js

输入任何字符串,并观看它以您设置的速度键入,退格所键入的内容,并为所设置的许多字符串开始一个新句子。

guy这个人是一个受欢迎的人,如在其着陆/首页中使用该人的站点列表所示,例如:松弛,envato,productmap,typed.com,git.market,allison.house/404(不要问我)为什么是404页)。

Typed通过数据包管理器📦安装:Bower,Yarn或Npm; 导入后,很容易创建提供DOM元素目标和选项对象的Typed对象。

从https://mattboldt.com/demos/typed-js/提取的代码

Typed.js的吸引人的功能之一是能够从HTML标签编写文本。 that那是什么意思?

在大多数库中,您将要键入的内容设置为字符串或字符串数​​组,但是在此之前,html中不存在单词,因此搜索引擎无法读取它,因此对SEO产生了影响😨。

键入模仿人类行为的动画。

Theater凭借出色的文档和出色的风格,剧院可能是最独特的图书馆之一。 使演员在场景之间进行交互的方法,使编写和理解变得容易。

从https://github.com/Zhouzi/TheaterJS提取的代码

要使用Theather,您可以从TheatreJS github网站下载,通过Bower或NPM安装它,或通过CDN JsDelivr添加它。 检查TheatreJS演示

🧐这是一个非常有趣的图书馆。 为什么? 就像Typer.js利用HTML 5数据属性一样,Type.js也利用CSS的功能来破解输入效果。

Type.js将新的类型属性添加到CSS中,从而为您提供了在Web上键入所需的控件。 您可以在CSS中编写这些属性,它们将像其他任何属性一样工作。

尽管可以肯定这是一个有趣的建议,但该设置可能看起来有些神秘,最重要的是,CSS的声誉已被破坏🤕有时具有新功能(感谢G对CSS网格的大力支持🙏)。

从http://typejs.org/提取的代码

⚠因此,老实说,我没有对此进行测试,我什至不确定自从GitHub上一次提交于2015年以来,它是否仍然有意义。 如果您想了解有关CSS字体字距调整的更多信息,请查阅文档。

死的简单动画键入,没有依赖关系。

lightweight优点是轻量级(最小化5.5 KB和2.3 KB),原始JS代码,1行初始化,易于在React中使用和CSS定制。 通过NPM,Yarn安装,或从GitHub页面获取。

从https://github.com/luisvinicius167/ityped提取的代码

一个微型库,用于在指定的文本元素上创建键入效果。

另一个直接指向点库,小于3KB,可通过Bower或NPM安装。 使用(元素,选项)结构创建对象。 检查TinyTyper演示

从https://github.com/lourenc/tinytyper中提取的代码

一个简单而强大的本地javascript插件,可提供出色的打字机效果。

该文档足以使用📖,并且源代码也比其他文件还要繁重,但是它在事件循环中很好地使用了队列,🧙该库中的另一个很酷的东西是字符删除,可让您删除n个字符或整个文本,👨‍💻将其与少量JavaScript结合在一起,您将在顶部得到类似gif的内容。

从https://safi.me.uk/typewriterjs/提取的代码

当然,还有更多,我相信Open Source和VanillaJS是可以使用的方法👊因此,jquery插件和付费选项被排除在外,但可以随意寻找替代方案。

如果您使用以上任何一种方法,请务必告诉作者🤝我确定他们会很高兴,并会尽力而为contribute。 我个人最喜欢的是TheatreJS👏your你是哪一个? 喊到黎明 Carbon ,用于代码图像的工具。

挑战

也许您没有注意到它,所以购买的大多数库都有2–3年的历史,因此,即使它们显示了一些很酷的功能🤯它们不是由很酷又实用的ES6操作员构建的-异步正在等待。

我将创建自己的名为“ Ghost Type ”的库,尝试实现此处列出的内容以及更现代的语法。 如果愿意,请跟随✌并告诉我您的想法😉