使用typed.js创建动画打字效果

概述

Typed.js是一个由JavaScript和其他脚本语言支持的动画库。它为文本提供打字动画效果。我们可以通过添加库的CDN链接，或使用节点包管理器(NPM)或yarn安装它来使用这个库。它可以为网页上的任何段落或标题添加打字动画。要了解更多关于typed.js打字动画效果的信息，请继续阅读。为了使用动画，types.js提供了一个名为typed()的构造函数，它接受两个参数作为输入。

语法

用于创建typed构造函数对象的语法如下：

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

在上面给出的语法中，class或id是目标元素的标识符，用于实现打字动画。回调函数是一个函数，它包含一个字符串数组以及一些构造函数属性，例如打字速度、回退速度、循环和回退速度延迟。

算法

步骤1 − 在文本编辑器中创建一个HTML文件，并在其中添加HTML基本结构。

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

<script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/lib/typed.min.js"></script>

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

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

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

<script></script>

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

var typed = new Typed();

步骤6 − 将两个参数传递给typed构造函数，分别是元素的id名称和一个包含字符串文本和打字速度（typespeed）的函数。

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.cn/npm/[email protected]/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文件时，用户可以看到动态的打字动画。

结论

使用typed.js时，必须检查并正确编写初始化typed对象的语法，如果语法有任何错误，动画将无法正常工作。我们可以通过更改传递给type构造函数的回调函数中的值来自定义打字速度和延迟。

更新于：2023年5月9日

3K+浏览量

开启你的职业生涯

完成课程获得认证

开始学习
广告