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", {
  speed50,
  startDelay900,
})
  .type("the mot versti", { delay100 })
  .move(-8, { delay100 })
  .type("s", { delay400 })
  .move(null, { to"START"instanttruedelay300 })
  .move(1, { delay200 })
  .delete(1)
  .type("T", { delay225 })
  .pause(200)
  .move(2, { instanttrue })
  .pause(200)
  .move(5, { instanttrue })
  .move(5, { delay200 })
  .type("a", { delay350 })
  .move(null, { to"END" })
  .type("le typing utlity")
  .move(-4, { delay150 })
  .type("i")
  .move(null, { to"END" })
  .type(' on the <span class="place">internet</span>', { delay400 })
  .delete(".place", { delay800instanttrue })
  .type('<em><strong class="font-semibold">planet.</strong></em>', {
    speed100,
  })
  .go();

githu链接:https://github.com/alexmacarthur/typeit

官网地址: https://www.typeitjs.com/

关注【前端实验室】公众号回复: bbbb223

即可免费获取拉勾教育价值17999元的全套前端教程

分类:

前端

标签:

前端

作者介绍

code狂魔
V1