Typed.js:為您的網頁添加動態仿打字效果

Typed.js 是一款輕量級的 JavaScript 套件,專門用在創造吸引人的仿打字效果。這種動態互動可以增強網站界面,提供更加好玩的用戶體驗。這篇將介紹如何在您的網頁中實現 Typed.js。

Typed.js

將 Typed.js 加入到網頁中。有兩種方法:
1.直接下載函式庫並連結到網頁
2.使用 CDN 連結。

若選擇使用 CDN,可以將以下代碼加入到 HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

HTML

HTML 中建立一個元素,Typed.js 會在這個元素中顯示打字效果。可以使用任何 HTML tab,只要確保其有一個唯一的 ID。

<span id="typed"></span>

這個元素將作為 Typed.js 打字效果的容器。

初始化 Typed.js

最後一步是在JavaScript 中初始化 Typed.js。將其傳遞給 Typed 函數。

以下是範例例子:

var options = {
  strings: ['這是第一行文字', '這是第二行文字'],
  typeSpeed: 40,
  backSpeed: 50,
  loop: true
};

var typed = new Typed('#typed', options);

演示(ipph工具網|Typed.js範例 (itw.one))

來源

GitHub – mattboldt/typed.js: A JavaScript Typing Animation Library

Typed.js is a library that types. Enter in any string, and watch it type at the speed you’ve set, backspace what it’s typed, and begin a new sentence for however many strings you’ve set.

發表迴響