資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學使用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/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></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/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檔案時，使用者可以看到動態的打字動畫。
結論
使用typed.js時，必須檢查並正確編寫初始化typed物件的語法，如果語法有任何錯誤，動畫將無法正常工作。我們可以透過更改傳遞給type建構函式的回撥函式中的值來自定義打字速度和延遲。
3K+瀏覽量
