打字动画 Typed.js
打字动画 Typed.js
概述
Typed.js 是一个 JavaScript 库，用于在网页上创建打字动画效果。它使您能够模拟打字机或逐字显示文本的效果，从而为用户提供逐渐展示文本的视觉体验。
Typed.js 提供了丰富的选项和配置，可以自定义打字动画的速度、暂停时间、删除效果等。您可以使用 HTML 元素或 JavaScript 调用来触发动画，并可以与其他 JavaScript 库和框架集成。
使用 Typed.js，可以通过简单的配置和几行代码创建各种类型的打字效果，例如逐字显示标题、动态更新文本、模拟用户输入等。它为网页添加了一种生动和有趣的交互方式，可以吸引用户的注意力并提升用户体验。
开始
CDN
<script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>
NPM
npm install typed.js
General ESM Usage
import Typed from 'typed.js';
const typed = new Typed('#element', {
strings: ['<i>First</i> sentence.', '& a second sentence.'],
typeSpeed: 50,
});
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.9/typicons.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
</head>
<body>
<h1><span id="typed"></span></h1>
<script>
// 初始化 Typed.js
var typed = new Typed('#typed', {
strings: ['Hello, World!', 'Welcome to Typed.js'],
typeSpeed: 50,
backSpeed: 30,
loop: true
});
</script>
</body>
</html>
常用属性
strings：一个字符串数组，包含要展示的文本内容。typeSpeed：打字速度，表示每个字符输入的延迟时间（以毫秒为单位）。startDelay：动画开始之前的延迟时间（以毫秒为单位）。backSpeed：删除速度，表示每个字符删除的延迟时间（以毫秒为单位）。backDelay：每次删除完成后的等待时间（以毫秒为单位）。loop：一个布尔值，指示动画是否应该循环播放。loopCount：限制循环播放的次数。showCursor：一个布尔值，指示是否显示光标。cursorChar：光标的字符。cursorSpeed：光标闪烁的速度（以毫秒为单位）。smartBackspace：一个布尔值，指示是否启用智能删除，根据回退速度自动调整删除时间。shuffle：一个布尔值，指示是否在打字之前随机打乱字符串数组。contentType：指定输入的内容类型，可以是'html'、'text'或'null'。onComplete：动画完成时的回调函数。
漫思
