大家好,我是前端实验室的大师兄！
不知道大家有没有见过这样炫酷的打字特效
如果把他放到自己的博客首页，相信一定会惊艳浏览者，今天就为大家带来一份 地球上最通用的JavaScript动画打字实用程序——typeit
typeit
TypeIt是一个通用的JavaScript打字机效果实现程序。凭借其简单而灵活的配置，您可以键入单个或多个字符串，这些字符串可以中断行，删除/替换彼此，轻松处理包含HTML的字符串，循环等等。
而且为了获得更高级、更可控的打字效果，TypeIt附带了一些配套功能，这些功能可以链接起来将您的打字控制在单个字符或毫秒，使您能够键入动态叙述，完全控制速度变化、换行、删除和暂停。
特点
- 为提供了一系列流畅的API，以便微调效果。
- 选择仅当目标元素在屏幕上可见时才开始键入。
- 连续循环字符串。
- 以编程方式或直接在HTML中定义字符串
- 轻松处理HTML（甚至是嵌套标签！），保留其所有属性（类，id等）SEO友好。
- 作为现代捆绑商的 ES 模块提供，或作为 UMD 库提供，用于通过传统标签加载。
<script>
安装
使用CDN引入
代码语言：javascript复制<script src="https://unpkg.com/typeit@8.7.0/dist/index.umd.js"></script>
使用npm安装
代码语言：javascript复制npm install typeit
使用
使用时先new 一个TypeIt实例，传入一个dom元素id和一个参数对象
<script src="<https://unpkg.com/typeit@8.7.0/dist/index.umd.js>"></script>
<script>
new TypeIt("#myElement", {
strings: "This is what will be typed!",
}).go();
</script>
多行打印
动态键入、效果逼真
TypeIt有许多api来控制打字的效果，你可以自由定制
new TypeIt("#hero", {
speed: 50,
startDelay: 900,
})
.type("the mot versti", { delay: 100 })
.move(-8, { delay: 100 })
.type("s", { delay: 400 })
.move(null, { to: "START", instant: true, delay: 300 })
.move(1, { delay: 200 })
.delete(1)
.type("T", { delay: 225 })
.pause(200)
.move(2, { instant: true })
.pause(200)
.move(5, { instant: true })
.move(5, { delay: 200 })
.type("a", { delay: 350 })
.move(null, { to: "END" })
.type("le typing utlity")
.move(-4, { delay: 150 })
.type("i")
.move(null, { to: "END" })
.type(' on the <span class="place">internet</span>', { delay: 400 })
.delete(".place", { delay: 800, instant: true })
.type('<em><strong class="font-semibold">planet.</strong></em>', {
speed: 100,
})
.go();
github链接：https://github.com/alexmacarthur/typeit 官网地址：https://www.typeitjs.com/
最后
欢迎加入前端实验室读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~
进群方式：在下方公众号后台，回复 111 ，按提示操作即可进群。
