如何使用 typed.js 建立動畫打字效果-js教程-PHP中文網

如何使用 typed.js 建立動畫打字效果

PHPz

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

轉載

1657 人瀏覽過

如何使用 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 檔案時，使用者可以看到即時工作的打字動畫。