如何使用typed.js创建一个带有动画打字效果

概述

Typed.js是由JavaScript和其他脚本语言支持的动画库。它为文本提供了打字动画效果。我们可以通过添加库的CDN链接或使用Node Package Manager（NPM）或Yarn来安装该库来使用该库。它可以在任何段落或标题中为网页提供打字动画效果。因此，要了解有关typed.js打字动画效果的更多信息，请使用types.js提供的构造函数typed()，它接受两个参数作为输入。

语法

用于创建构造函数types对象的语法为−

var typed = new Typed(element class or Id, callback function);

在上述给出的语法中，类或id是要针对键入动画的元素。回调函数是一个带有字符串数组和一些类型构造函数属性（例如键入速度、回退速度、循环和回退速度延迟）的函数。

步骤

步骤1 - 在文本编辑器中创建一个HTML文件，并在其中添加HTML模板。

步骤2 - 在HTML文档的head标签中添加typed.js的CDN链接。

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js"></script>

步骤3 - 现在创建一个带有id名称“typed-text”的div容器。

<div id="typed-text"></div>

步骤4 − 在body标签结束之前创建一个脚本标签。

<script></script>

步骤5 - 实例化一个类型化的构造函数，并创建一个对象并将其存储在一个引用变量中。

var typed = new Typed();

步骤6 − 将这两个参数作为元素的id名称和一个函数（该函数的参数为字符串文本和打字速度）传递给typed构造函数。

var typed = new Typed('#typed-text', {
   strings: ["Welcome to the tutorials point. There are many different course on our platform. We also provide you with the tutorial for wach and every techcnology.", "incidunt quasi aperiam ipsum dolorum nisi rem inventore error voluptate? Voluptate laborum iure,. Blanditiis corporis expedita temporibus atque sit, molestiae itaque in ullam, ex pariatur incidunt quasi aperiam ipsum dolorum nisi rem inventore error voluptate? Voluptate laborum iure, dolores beatae ratione eos laboriosam velit corrupti unde praesentium quidem, minima qui cumque. Deserunt doloribus modi amet."],
   typeSpeed: 40,
   backSpeed: 10,
   loop: true
});

步骤7 − 在浏览器中打开index.html文件，您将在目标文本中看到一个打字动画。

示例

在这个示例中，我们将使用typed.js在文本中创建一个打字动画。

<html>
<head>
   <title>typing animation</title>
   <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js"></script>
</head>
<body>
   <h3 style="text-align: center;">tutorialspoint.com</h3>
   <div id="typed-text" style=" font-size: 2rem;font-family: monospace; font-weight: 800;"></div>
   <script>
      var typed = new Typed('#typed-text', {
         strings: ["Welcome to the tutorials point. There are many different course on our platform. We also provide you with the tutorial for each and every techcnology.", "incidunt quasi aperiam ipsum dolorum nisi rem inventore error voluptate? Voluptate laborum iure,. Blanditiis corporis expedita temporibus atque sit, molestiae itaque in ullam, ex pariatur incidunt quasi aperiam ipsum dolorum nisi rem inventore error voluptate? Voluptate laborum iure, dolores beatae ratione eos laboriosam velit corrupti unde praesentium quidem, minima qui cumque. Deserunt doloribus modi amet."],
         typeSpeed: 40,
         backSpeed: 10,
         loop: true
     });
   </script>
</body>
</html>

下面给出的图像显示了上述示例的输出，它显示了浏览器屏幕上的一些文本。当用户在浏览器中打开这个HTML文件时，用户可以看到实时的打字动画。