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

Typed.js是一个 JavaScript 库，用于以您设置的速度输入一组字符串，退格输入的内容并以您设置的另一个字符串开始输入。

让我们首先创建一个项目文件夹并根据您的意愿命名它。创建两个文件并将它们命名为“index.html”和“style.css”

1. 在“index.html”中写入以下代码

   HTML

   
   
     
   
       
       
       
   
     
   
       
   
           
   GeeksforGeeks
           
   
               
                   A computer Science portal for geeks,
                   A place to pratice code
               
     
               
               
           
       
   
     
   

2. 将以下 CSS 代码写入您的“style.css”文件。

3. 现在您必须从以下链接下载“typed.js”脚本文件夹并将其解压缩并将其保存在您的项目目录中。

   下载链接： https : //mattboldt.com/demos/typed-js/

   此外，您必须包含 jQuery 库才能使用 jQuery 函数。有两种方法，一种是下载并添加“jquery.js”文件，另一种是添加其 CDN 文件链接。在这里，您将使用 CDN 链接添加 jQuery。

   CDN 链接： https : //developers.google.com/speed/libraries/devguide#jquery

4. 我们必须从“typed.js”文件夹中导入并添加“typed.js”文件。在“body”标签之前添加所有 JavaScript 文件。还将以下脚本添加到您的“index.html”文件中。

   HTML

       if ($(".text-slider").length == 1) {
           var typed_strings = $(".text-slider-items").text();
           var typed = new Typed(".text-slider", {
               strings: typed_strings.split(", "),
               typeSpeed: 50,
               loop: true,
               backDelay: 900,
               backSpeed: 30,
           });
       }

   它应该是这样的。

   HTML

     
   
       Typed.js
     
       
       
   
     
   
       
           GeeksforGeeks
           
               
                   A computer Science portal for 
                   geeks, A place to pratice code
               
               
     
           
       
       
       
       
         
       
       
       
     
       
       
           if ($(".text-slider").length == 1) {
                 
               var typed_strings = 
                   $(".text-slider-items").text();
     
               var typed = new Typed(".text-slider", {
                   strings: typed_strings.split(", "),
                   typeSpeed: 50,
                   loop: true,
                   backDelay: 900,
                   backSpeed: 30,
               });
           }
       
   
     

   启动“index.html”文件并注意输出。

输出：