这恐怕是地球上最通用的JavaScript动画打字库吧~

程序员老鱼

发布于 2022-12-02 11:16:32

4880

发布于 2022-12-02 11:16:32

文章被收录于专栏：前端实验室

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

不知道大家有没有见过这样炫酷的打字特效

如果把他放到自己的博客首页，相信一定会惊艳浏览者，今天就为大家带来一份 地球上最通用的JavaScript动画打字实用程序——typeit

typeit

TypeIt是一个通用的JavaScript打字机效果实现程序。凭借其简单而灵活的配置，您可以键入单个或多个字符串，这些字符串可以中断行，删除/替换彼此，轻松处理包含HTML的字符串，循环等等。

而且为了获得更高级、更可控的打字效果，TypeIt附带了一些配套功能，这些功能可以链接起来将您的打字控制在单个字符或毫秒，使您能够键入动态叙述，完全控制速度变化、换行、删除和暂停。

特点

为提供了一系列流畅的API，以便微调效果。
选择仅当目标元素在屏幕上可见时才开始键入。
连续循环字符串。
以编程方式或直接在HTML中定义字符串
轻松处理HTML（甚至是嵌套标签！），保留其所有属性（类，id等）SEO友好。
作为现代捆绑商的 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();