引言
在网页设计中，动态效果能够显著提升用户体验和页面的吸引力。打字机效果（typewriter effect）便是其中一种常见的动画，它模拟了文本逐字输入的过程，常用于突出关键信息、制作引导语或增加页面的趣味性。本教程将指导您如何结合 html、css 和 javascript，从零开始构建一个可自定义的打字机文本动画。
1. HTML 结构：定义文本容器
首先，我们需要一个 HTML 元素来承载将要动态显示的文本。为了精确控制打字机效果的作用范围，我们强烈建议为该元素指定一个唯一的 id。在本例中，我们将使用一个
标签，并为其设置 id="typewriter-text"。
打字机效果
请注意，初始时
标签内部可以为空，因为文本内容将完全由 JavaScript 动态生成。2. CSS 样式：实现闪烁光标
打字机效果的一个重要组成部分是文本末尾闪烁的光标。我们可以通过 CSS 来实现这个效果。我们将利用一个 元素来模拟光标，并通过 CSS 动画使其周期性地改变边框颜色，从而产生闪烁感。
在 JavaScript 中，我们将动态地将这个 元素添加到当前文本的末尾。为了确保它不会被屏幕阅读器误读为实际文本内容，我们还会添加 aria-hidden="true" 属性。
立即学习“Java免费学习笔记（深入）”；
/* style.css */
#typewriter-text {
font-family: monospace; /* 保持等宽字体，使光标位置稳定 */
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏超出容器的文本，虽然在这里不直接作用于打字机效果 */
display: inline-block; /* 确保h1可以被span撑开 */
}
#typewriter-text span {
border-right: .05em solid; /* 光标样式：右边框 */
animation: caret 1s steps(1) infinite; /* 应用光标闪烁动画 */
}
@keyframes caret {
50% {
border-color: transparent; /* 动画50%时，边框变为透明 */
}
}- border-right: .05em solid;：创建了一个细长的右边框，模拟打字光标。
- animation: caret 1s steps(1) infinite;：将名为 caret 的动画应用于光标。
- 1s：动画持续时间为1秒。
- steps(1)：指定动画在一步内完成，这意味着它会立即从一种状态跳到另一种状态，而不是平滑过渡，这对于闪烁效果至关重要。
- infinite：动画无限循环。
- @keyframes caret：定义了 caret 动画的关键帧。在动画进行到50%时，光标的边框颜色变为透明，从而实现了闪烁效果。
3. JavaScript 逻辑：核心动画实现
JavaScript 是实现打字机效果的核心。它负责管理要显示的文本内容、逐字输出文本、控制动画速度以及处理文本序列的循环播放。
我们将把所有 JavaScript 代码放在 DOMContentLoaded 事件监听器中，以确保 DOM 完全加载后再执行脚本。
// script.js
document.addEventListener('DOMContentLoaded', function(event) {
// 定义要进行打字机效果的文本数组
const dataText = [
"VISIBILITÀ.",
"NUOVI INGAGGI.",
"NUOVI FAN.",
"PIÙ VISIBILITÀ!",
"SUCCESSO!"
];
const targetElement = document.getElementById('typewriter-text'); // 获取目标元素
/**
* 实现单个字符串的打字机效果
* @param {string} text - 要显示的字符串
* @param {number} i - 当前字符索引
* @param {function} fnCallback - 文本完成时的回调函数
*/
function typeWriter(text, i, fnCallback) {
// 检查文本是否已全部显示
if (i < text.length) {
// 将下一个字符添加到目标元素，并附加闪烁光标
targetElement.innerHTML = text.substring(0, i + 1) + '';
// 设置延迟，然后递归调用自身以显示下一个字符
setTimeout(function() {
typeWriter(text, i + 1, fnCallback);
}, 90); // 字符显示速度，单位毫秒
}
// 如果文本已显示完毕，并且存在回调函数
else if (typeof fnCallback === 'function') {
// 在短暂延迟后调用回调函数
setTimeout(fnCallback, 2000); // 文本显示完毕后等待2秒
}
}
/**
* 启动文本数组的打字机动画序列
* @param {number} i - dataText 数组的当前索引
*/
function StartTextAnimation(i) {
// 如果当前索引超出 dataText 数组范围，则循环回到第一个文本
if (i >= dataText.length) {
setTimeout(function() {
StartTextAnimation(0); // 循环回到数组开头
}, 20000); // 等待20秒后重新开始整个序列
return; // 结束当前函数执行
}
// 确保 dataText[i] 存在（即不是 undefined）
if (dataText[i]) {
// 开始对当前文本进行打字机动画
typeWriter(dataText[i], 0, function() {
// 当前文本动画完成后，启动下一个文本的动画
StartTextAnimation(i + 1);
});
}
}
// 启动文本动画序列
StartTextAnimation(0);
});代码详解：
- dataText 数组: 这是一个包含所有要显示文本的字符串数组。您可以根据需要修改其中的内容。
-
targetElement: 通过 document.getElementById('typewriter-text') 获取到我们之前在 HTML 中定义的
元素，确保 JavaScript 精确地操作目标元素。
-
typeWriter(text, i, fnCallback) 函数:
- 这是实现单个字符串打字机效果的核心函数。
- text.substring(0, i + 1)：截取从字符串开头到当前索引 i 的子字符串，模拟逐字显示。
- ''：在当前文本末尾添加一个用于显示闪烁光标的 元素。aria-hidden="true" 确保了辅助技术（如屏幕阅读器）会忽略这个纯粹用于视觉效果的元素。
- setTimeout(function() { typeWriter(text, i + 1, fnCallback); }, 90);：设置一个定时器，在90毫秒后递归调用 typeWriter 函数，以显示下一个字符。这个延迟决定了打字速度。
- 当 i 等于 text.length 时，表示当前字符串已全部显示完毕。此时，如果提供了 fnCallback（一个回调函数），则在2000毫秒（2秒）后执行它，为用户留出阅读当前文本的时间。
-
StartTextAnimation(i) 函数:
- 这个函数负责管理 dataText 数组中字符串的序列播放。
- if (i >= dataText.length)：检查当前索引 i 是否超出了 dataText 数组的范围。如果超出，说明所有文本都已播放一遍，此时会设置一个20秒的延迟，然后从数组的第一个文本 (StartTextAnimation(0)) 重新开始整个动画序列。
- if (dataText[i]): 确保当前 dataText[i] 存在，防止因索引越界导致错误（尽管前面的 if 语句已经处理了这种情况，但这是一个良好的防御性编程习惯）。
- typeWriter(dataText[i], 0, function(){ StartTextAnimation(i + 1); });：调用 typeWriter 函数来显示 dataText 数组中的当前字符串。当 typeWriter 完成其任务后，它会执行提供的回调函数，该回调函数会调用 StartTextAnimation(i + 1) 来启动数组中的下一个字符串的动画。
- StartTextAnimation(0);: 在 DOMContentLoaded 事件监听器内部，调用 StartTextAnimation(0) 来启动整个打字机动画序列，从 dataText 数组的第一个文本开始。
4. 完整示例代码
将上述 HTML、CSS 和 JavaScript 代码分别保存为 index.html、style.css 和 script.js，并确保它们在同一目录下。
index.html
动态打字机效果
style.css
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #282c34;
color: #61dafb;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#typewriter-text {
font-size: 3em;
font-family: monospace;
white-space: nowrap;
overflow: hidden;
display: inline-block;
border-right: .15em solid orange; /* 初始光标，将被JS中的span替换 */
padding-right: 0.15em; /* 防止文本与光标过于接近 */
}
#typewriter-text span {
border-right: .05em solid; /* 实际闪烁光标样式 */
animation: caret 1s steps(1) infinite;
}
@keyframes caret {
50% {
border-color: transparent;
}
}script.js
document.addEventListener('DOMContentLoaded', function(event) {
const dataText = [
"VISIBILITÀ.",
"NUOVI INGAGGI.",
"NUOVI FAN.",
"PIÙ VISIBILITÀ!",
"SUCCESSO!"
];
const targetElement = document.getElementById('typewriter-text');
function typeWriter(text, i, fnCallback) {
if (i < text.length) {
targetElement.innerHTML = text.substring(0, i + 1) + '';
setTimeout(function() {
typeWriter(text, i + 1, fnCallback);
}, 90);
} else if (typeof fnCallback === 'function') {
setTimeout(fnCallback, 2000);
}
}
function StartTextAnimation(i) {
if (i >= dataText.length) {
setTimeout(function() {
StartTextAnimation(0);
}, 20000);
return;
}
if (dataText[i]) {
typeWriter(dataText[i], 0, function() {
StartTextAnimation(i + 1);
});
}
}
StartTextAnimation(0);
});5. 注意事项与优化
- 性能: 对于大量文本或复杂动画，innerHTML 的频繁操作可能影响性能。在更复杂的场景中，可以考虑使用 DOM 片段（DocumentFragment）或虚拟 DOM 库。
- 可访问性: aria-hidden="true" 对光标 的使用是一个很好的实践，因为它确保了屏幕阅读器不会将闪烁的光标读作实际内容。
-
自定义:
- 打字速度: 调整 typeWriter 函数中的 setTimeout 延迟（例如 90 毫秒）可以改变字符显示的速度。
- 文本切换延迟: 调整 typeWriter 函数中回调前的 setTimeout 延迟（例如 2000 毫秒）可以改变每个文本显示完毕后的等待时间。
- 循环延迟: 调整 StartTextAnimation 函数中循环回开头前的 setTimeout 延迟（例如 20000 毫秒）可以改变整个序列重新开始前的等待时间。
- 光标样式: 修改 style.css 中 span 的 border-right 和 caret 动画可以改变光标的外观和闪烁方式。
- 目标元素: 如果需要对多个元素应用打字机效果，可以封装这些函数，使其接受目标元素的 id 或引用作为参数，或者为每个元素创建独立的实例。
- CSS white-space: nowrap; 和 overflow: hidden;: 这些属性可以防止文本在打字过程中换行或超出容器，保持效果的整洁。
总结
通过结合 HTML 结构、CSS 动画和 JavaScript 逻辑，我们成功创建了一个动态且高度可定制的打字机文本效果。这种效果不仅能增强网页的视觉吸引力，还能有效地引导用户注意力，提升内容的表现力。理解并掌握这些基础技术，将为您的前端开发工作带来更多可能性。
