code狂魔
V1
2022/10/15阅读:48主题:萌绿
地球上最通用的JavaScript动画打字实用程序
大家好,我是前端实验室
的大师兄!
不知道大家有没有见过这样炫酷的打字特效 如果把他放到自己的博客首页,相信一定会惊艳浏览者,今天就为大家带来一份 地球上最通用的JavaScript动画打字实用程序——typeit
typeit
TypeIt
是地球上最通用的JavaScript打字机效果实用程序。凭借其简单而灵活的配置,您可以键入单个或多个字符串,这些字符串可以中断行,删除/替换彼此,轻松处理包含HTML的字符串,循环等等。
而且为了获得更高级、更可控的打字效果,TypeIt附带了一些配套功能,这些功能可以链接起来将您的打字控制在单个字符或毫秒,使您能够键入动态叙述,完全控制速度变化、换行、删除和暂停。
特点
-
为提供了一系列流畅的API,以便微调效果。 -
选择仅当目标元素在屏幕上可见时才开始键入。 -
连续循环字符串。 -
以编程方式或直接在HTML中定义字符串 -
轻松处理HTML(甚至是嵌套标签!),保留其所有属性(类,id等)。 -
作为现代捆绑商的 ES 模块提供,或作为 UMD 库提供,用于通过传统标签加载。 <script>
安装
使用CDN引入
<script src="https://unpkg.com/typeit@8.7.0/dist/index.umd.js"></script>
使用npm安装
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();
githu链接:https://github.com/alexmacarthur/typeit
官网地址: https://www.typeitjs.com/
关注【前端实验室】公众号回复: bbbb223
即可免费获取拉勾教育价值17999元的全套前端教程

作者介绍
code狂魔
V1