在现代网页设计中，动态文本效果，如打字机动画或根据用户行为（如滚动）切换文本内容，能够显著提升用户体验和页面的交互性。本教程将从基础的打字机效果入手，逐步深入到如何实现更高级的滚动触发文本切换功能。
打字机效果模拟了文字逐个字符出现的动画，是前端常见的动态文本展示方式。它可以通过纯CSS或JavaScript来实现。
CSS方法主要利用steps()定时函数和overflow: hidden来模拟字符的逐个显示，并通过边框模拟光标闪烁。
核心原理：
示例代码：
立即学习“前端免费学习笔记（深入）”；
<style>
.typewriter-container {
font-family: monospace;
font-size: 2em;
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏超出部分 */
border-right: .15em solid orange; /* 模拟光标 */
width: 0; /* 初始宽度为0 */
animation:
typing 3.5s steps(30, end) forwards, /* 打字动画 */
blink-caret .75s step-end infinite; /* 光标闪烁动画 */
}
/* 打字动画 */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* 光标闪烁动画 */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange }
}
</style>
<div class="typewriter-container">
Hello, World! Welcome.
</div>注意事项：
JavaScript提供了更大的灵活性，可以处理动态文本、更复杂的动画逻辑和用户交互。
核心原理：
示例代码：
立即学习“前端免费学习笔记（深入）”；
<style>
.js-typewriter {
font-family: monospace;
font-size: 2em;
border-right: .15em solid orange; /* 模拟光标 */
animation: blink-caret .75s step-end infinite; /* 光标闪烁动画 */
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange }
}
</style>
<div id="jsTypewriter" class="js-typewriter"></div>
<script>
function typeWriter(elementId, text, speed) {
let i = 0;
const element = document.getElementById(elementId);
element.textContent = ''; // 清空内容
function type() {
if (i < text.length) {
element.textContent += text.charAt(i);
i++;
setTimeout(type, speed);
}
}
type();
}
document.addEventListener('DOMContentLoaded', () => {
typeWriter('jsTypewriter', 'Hello, JavaScript World!', 100); // 100ms 间隔
});
</script>优势：
在某些场景下，我们希望文本内容能够根据用户的滚动行为进行动态切换，例如在页面顶部显示完整标题，滚动后则显示缩略标题。这通常需要结合JavaScript来监听滚动事件。
以网站 axelspringer.com 为例，其在页面顶部显示完整Logo文本，向下滚动后则切换为简短文本。这种效果的实现通常涉及以下步骤：
参考实现（基于提供的代码片段）：
以下代码片段展示了如何在一个组件的 handleScrollDown 方法中实现这一逻辑。
// 假设这是某个组件的方法
key: "handleScrollDown",
value: function () {
var e = this, // 'this' 指向当前组件实例
t = 0 === window.scrollY, // t 为 true 表示在页面顶部
n = t != this.isTopMode; // n 为 true 表示滚动状态发生了变化
(this.isTopMode = t), // 更新组件的顶部模式状态
n && t // 如果状态发生变化且当前在顶部
? window.requestAnimationFrame(function () {
// 使用 requestAnimationFrame 优化动画性能
e.element.classList.remove("u-header--scrolled-down"),
e.element.classList.add("u-header--scrolled-top"),
document.body.classList.remove("u-body--header-scrolled-down"),
document.body.classList.add("u-body--header-scrolled-top"),
// 检查是否存在 getLogoWriter 方法，并设置 Logo 文本为 "axel springer"
e.element.querySelector(".u-logo__text").getLogoWriter && e.element.querySelector(".u-logo__text").getLogoWriter().setText("axel springer");
})
: n &&
!t && // 如果状态发生变化且当前不在顶部
window.requestAnimationFrame(function () {
e.element.classList.add("u-header--scrolled-down"),
e.element.classList.remove("u-header--scrolled-top"),
document.body.classList.add("u-body--header-scrolled-down"),
document.body.classList.remove("u-body--header-scrolled-top"),
// 检查是否存在 getLogoWriter 方法，并设置 Logo 文本为 "a"
e.element.querySelector(".u-logo__text").getLogoWriter && e.element.querySelector(".u-logo__text").getLogoWriter().setText("a");
});
}关键点解析：
要构建一个通用的滚动触发文本切换功能，可以遵循以下步骤：
HTML结构：
<header id="mainHeader"> <span id="dynamicLogoText">初始文本</span> </header> <!-- 大量内容以产生滚动条 --> <div style="height: 2000px;"></div>
JavaScript逻辑：
document.addEventListener('DOMContentLoaded', () => {
const header = document.getElementById('mainHeader');
const logoText = document.getElementById('dynamicLogoText');
const threshold = 50; // 滚动超过 50px 时触发
let isScrolled = false; // 跟踪是否已滚动
function handleScroll() {
const scrolledDown = window.scrollY > threshold;
// 仅当滚动状态发生变化时才执行操作
if (scrolledDown !== isScrolled) {
isScrolled = scrolledDown; // 更新状态
window.requestAnimationFrame(() => {
if (isScrolled) {
// 滚动向下，显示简短文本
header.classList.add('scrolled');
logoText.textContent = '简';
} else {
// 滚动到顶部，显示完整文本
header.classList.remove('scrolled');
logoText.textContent = '完整文本';
}
});
}
}
// 初始化检查一次，以防页面加载时已滚动
handleScroll();
window.addEventListener('scroll', handleScroll);
});CSS样式（可选）：
#mainHeader {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #f0f0f0;
padding: 10px 20px;
transition: all 0.3s ease;
z-index: 1000;
}
#mainHeader.scrolled {
background-color: #ccc;
padding: 5px 15px;
}
#dynamicLogoText {
font-size: 24px;
transition: font-size 0.3s ease;
}
#mainHeader.scrolled #dynamicLogoText {
font-size: 18px;
}本教程详细介绍了前端动态文本效果的实现，从基础的CSS和JavaScript打字机效果，到利用JavaScript监听滚动事件实现文本内容的动态切换。理解 requestAnimationFrame、事件监听与状态管理是实现流畅、高性能交互的关键。通过灵活运用这些技术，开发者可以为用户创造出更具吸引力和交互性的网页体验。
以上就是前端实现动态文本效果：从打字机到滚动触发的交互式文本切换的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
615
收藏
