如何使用 typed.js 创建动画打字效果-js教程-PHP中文网

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

PHPz

发布： 2023-08-27 23:17:11

转载

1603 人浏览过

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

概述

Typed.js是一个支持java脚本和其他脚本语言的动画库。它为文本提供打字动画效果。我们可以通过添加库的CDN链接或使用节点包管理器（NPM）或yarn安装来使用该库。它提供了一个网页，其中任何段落或标题中都有打字动画。所以要详细了解typed.js的打字动画效果。为了使用动画，types.js 提供了一个名为 typed() 的构造函数，它接受两个参数作为输入。

语法

用于创建构造函数类型的对象的语法是 -

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 名称，并传递一个函数，其中包含字符串文本和打字速度作为 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 在文本中创建打字动画。



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


   tutorialspoint.com
   
   <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>

登录后复制

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