大家好,我是前端实验室的大师兄！

不知道大家有没有见过这样炫酷的打字特效如果把他放到自己的博客首页，相信一定会惊艳浏览者，今天就为大家带来一份 地球上最通用的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元的全套前端教程