Typed.js参数汇总——做出属于你自己的Web打字机效果
tabzzz 2024-06-27 10:33:03 阅读 80
Typed.js 是一个灵活的 JavaScript 库,用于在网页上创建打字动画效果,提供了多种自定义选项。以下是根据多个来源汇总的其关键参数及使用示例的概览:
安装: 可以通过 CDN 或使用 NPM、Yarn 将 Typed.js 包含到你的项目中。对于直接在浏览器中使用,你可以简单地将其 <script>
标签添加到你的 HTML 中。对于模块化的项目,如使用 React、Vue.js 或其他现代 JavaScript 框架,Typed.js 可以作为模块被导入。
基本用法: 创建一个 Typed 实例,通过传递选择器和参数对象来指定动画的元素和配置。参数包括要打字的字符串(strings
)、打字速度(typeSpeed
)和是否循环(loop
)等。
参数详解:
strings
: 要打印的字符串数组。
typeSpeed
: 打字速度,以毫秒为单位。
startDelay
: 打字开始前的延迟时间,以毫秒为单位。
backSpeed
: 删除速度,以毫秒为单位。
smartBackspace
: 智能删除,仅删除与前一个字符串不匹配的字符。
shuffle
: 字符串数组随机排序。
backDelay
: 后退延迟,即打字和删除之间的延迟时间,以毫秒为单位。
fadeOut
: 是否淡出而不是删除。
loop
: 是否循环播放字符串数组。
loopCount
: 循环次数,Infinity
为无限循环。
showCursor
: 是否显示光标。
cursorChar
: 光标字符。
autoInsertCss
: 是否自动插入 CSS 为光标和淡出效果。
attr
: 打字属性,例如输入占位符、值或仅仅是 HTML 文本。
生命周期回调函数,如 onBegin
、onComplete
、onStringTyped
等,提供动画的各个阶段的钩子。
高级配置:
使用 stringsElement
从静态 HTML 中提取字符串,对 SEO 友好。
typeSpeed
和 backSpeed
允许精细控制打字和删除速度。
通过 loop
和 shuffle
参数可以增加动画的多样性和复杂度。
自定义光标样式和动画,需要手动添加 CSS 代码
这篇文章很短,但是干货十足,总结了Typed.js中常用的参数。因为本人想要尝试一下打字机效果,发现了这个库但是没有在网上搜到一些相关的参数汇总,没办法,只能去读了一下官方文档。
如果帮助到了你,希望你可以点一个赞,不胜感激!
上一篇: 掉了两根头发后,我悟了!vue3的scoped原来是这样避免样式污染(上)
本文标签
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。