Typed.js参数汇总——做出属于你自己的Web打字机效果

Typed.js 是一个灵活的 JavaScript 库，用于在网页上创建打字动画效果，提供了多种自定义选项。以下是根据多个来源汇总的其关键参数及使用示例的概览：

• 安装: 可以通过 CDN 或使用 NPM、Yarn 将 Typed.js 包含到你的项目中。对于直接在浏览器中使用，你可以简单地将其 标签添加到你的 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中常用的参数。因为本人想要尝试一下打字机效果，发现了这个库但是没有在网上搜到一些相关的参数汇总，没办法，只能去读了一下官方文档。

  如果帮助到了你，希望你可以点一个赞，不胜感激！