滚动淡入是糟糕的UX反模式，别再用了

过去五年里，你在每个营销网站、SaaS 落地页和作品集上都见过它。你向下滚动页面，内容从下方浮现，从侧边滑入，或者在进入视口的瞬间凭空出现。有时还会加上错峰延迟，每个元素像歌舞团的队列一样一个接一个地登场。做这些效果的开发者觉得它看起来很“高级”，而遇到它的用户只想好好读页面。

滚动淡入动画，也就是有些开发者口中的“scroll reveal”，已经成为网页上最普遍的模式之一。它们同时也是最不友好的模式之一。它们拖慢了感知性能，破坏了无障碍体验，干扰了内容浏览，却没有给用户对页面的理解增加任何东西。是时候停止使用它们了。

反对滚动淡入的理由

滚动淡入的问题并不隐晦，而是根本性的。

内容在你滚动到之前是不可见的。这话听起来显而易见，但想想它意味着什么。如果用户快速滚动去找某个具体部分，比如价格表、功能对比或技术规格，在动画追上之前他们看到的只是一片空白。内容明明已经在 DOM 里，却被 opacity: 0 和一个还没触发的 CSS 过渡藏了起来。快速滚动的人什么也看不到。用 Ctrl+F 页内搜索的用户会定位到看不见的文字。某些辅助技术的用户可能根本无法触发滚动事件。

它惩罚了快速阅读的人。错峰淡入强迫用户等待每个元素依次出现，无论他们的阅读速度有多快。一个熟练的读者在页面上扫描关键信息时，被人为地拖慢到动画的节奏。一个区块里有五个条目，每个延迟 300 毫秒，就意味着 1.5 秒的强制等待，而你正在评估一款产品时，这简直漫长得要命。

它会搞坏后退按钮。打开一个页面，滚动到一半，点了个链接，再按后退。在很多滚动淡入的实现里，你回到页面时，之前已经显示过的内容又全部变成不可见，你得重新滚动一遍已经看过的内容，才能再次触发动画。

性能税

滚动淡入动画有真实的性能成本，即使经过了“优化”。Intersection Observer API 比滚动事件监听器更好，但这种模式仍然需要 JavaScript 运行、计算相交比例，并在滚动时修改 DOM 元素。一个页面上有 50 个淡入元素，用户每滚动一下，就有 50 个 observer 在触发。

// The "modern" approach — still problematic
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
// Each of these triggers a style recalculation
// and potentially a layout/paint operation
}
});
}, { threshold: 0.1 });
// Observing 50+ elements on a landing page
document.querySelectorAll('.fade-in').forEach(el => {
observer.observe(el);
});
// Plus the CSS:
// .fade-in { opacity: 0; transform: translateY(20px); transition: 0.6s; }
// .fade-in.visible { opacity: 1; transform: translateY(0); }

更大的性能问题是累积布局偏移（CLS）。如果处理不当，那些初始为 opacity: 0 并带有 translateY 偏移、之后动画到最终位置的元素，会导致布局偏移。Google 的 Core Web Vitals 会惩罚这一点。许多滚动淡入的实现都在拉高 CLS 分数，进而损害搜索排名，这恰恰与营销网站的初衷背道而驰。

还有初始渲染的问题：内容一开始就是隐藏的。如果你的 JavaScript 加载失败、被广告拦截器拦下（有时它们会误伤动画库），或者直接报错，内容就会永远处于不可见状态。你那个“高级”的落地页，现在变成了一张白纸。

无障碍的损伤

大约 40 岁以上成年人中有 35% 左右存在前庭功能障碍，这类人群看到动态效果可能会头晕、恶心或迷失方向。prefers-reduced-motion 媒体查询正是为此而设，但很多滚动淡入的实现完全无视它。

/* The bare minimum, which most sites skip */
@media (prefers-reduced-motion: reduce) {
.fade-in {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}

即便尊重了 prefers-reduced-motion，还有更深层的无障碍问题。屏幕阅读器是通过标题、地标和链接来导航的，而不是靠滚动。如果内容要等到滚动事件触发后才显示，屏幕阅读器用户可能会碰到看不见的元素，或者读屏软件朗读出了明眼用户还看不到的内容。对于同时依赖声音和视觉反馈的用户来说，这种割裂会非常令人困惑。

键盘导航也同样受影响。用 Tab 键在一个带滚动淡入元素的页面上切换，你会聚焦到看不见的链接和按钮上。焦点轮廓显示在一个透明元素上，用户根本不知道自己聚焦到了什么。

这种模式为何长盛不衰

如果滚动淡入问题这么多，它为什么到处都是？原因有三。

第一，它在演示里看起来很好。设计师或开发者向利益相关方展示落地页时，会慢慢滚动页面，大家盯着看。动画显得有意图、有质感。但演示并不是用户浏览网页的方式。用户会快速滚动、四处跳转、使用搜索、通过标题导航。演示里那种缓慢、线性、首次访问的滚动，恰恰是最不常见的真实使用方式。

第二，所有竞争对手都在这么做。滚动淡入已经成了“现代网页设计”的标志。不用它，你的网站看起来就像静态的，而利益相关方会把这理解为过时。这纯粹是盲目跟风：这些动画并不服务于任何功能，它们只是满足了其他网站制造出来的审美期待，而那些网站同样也不需要它们。

第三，模板和组件库默认就带着它。Framer Motion、AOS、ScrollReveal、GSAP ScrollTrigger，这些库让滚动动画的添加变得轻而易举。当加一个动画只需要一行属性时，它就会被到处添加。实现成本如此之低，以至于没人会停下来问一问这个动画到底是不是为用户服务。

动画真正有帮助的时候

动效本身并非天生有害。当动画服务于以下目的之一时，它就是正当的界面工具：

• 展示因果关系。点击按钮后面板滑入，传达了操作与结果之间的关系。这有助于用户在脑中建立对界面的心智模型。
• 引导注意力。通知角标上一个轻微的脉冲，能把视线吸引到新信息上。这是主动的，即由系统引导注意力，而不是被动地等待滚动。
• 保持空间上下文。视图之间的动画过渡（比如 iOS 的导航推入/弹出）能帮助用户理解自己在层级结构中的位置。没有这个动画，切换会显得生硬突兀。
• 提供反馈。加载转圈、进度条、骨架屏，这些都在告诉用户有事情正在发生。它们能减少用户感知到的等待时间。

注意这些情况的共同点：动画传递了信息，帮助用户理解界面。滚动淡入两者都做不到，它纯粹是装饰。内容从下方浮现，并不会告诉用户这段内容与其他元素的关系，也不能说明它的重要程度。这就是为动效而动效。

该怎么做

如果你希望页面看起来有活力，又不想承受滚动淡入的副作用，下面这些方法确实行之有效。

直接展示内容。这在大多数情况下（大约 90% 的时候）都是最佳选择。立即可见的内容才能被阅读、搜索和浏览。一个排版出色、层级清晰、间距得当的版面，看起来比满屏动画更好，加载更快，更无障碍，而且不会因为 JavaScript 出错而崩溃。

使用 CSS 滚动驱动动画。新的 CSS animation-timeline: scroll() 和 animation-timeline: view() 属性，让你无需 JavaScript 就能创建与滚动联动的效果。它们由 GPU 加速，不会引起布局偏移，并且能优雅降级。如果你确实需要与滚动联动的动效，这是正确的实现方式。

/* CSS scroll-driven animation — no JavaScript needed */
.parallax-bg {
animation: parallax linear;
animation-timeline: scroll();
}
@keyframes parallax {
from { transform: translateY(0); }
to { transform: translateY(-50px); }
}
/* Respects user preferences automatically */
@media (prefers-reduced-motion: reduce) {
.parallax-bg {
animation: none;
}
}

在交互时做动画，而不是在滚动时。悬停效果、点击响应、焦点状态，这些都由用户意图触发，并提供直接反馈。它们让人觉得灵敏，而不是表演式的。一张在悬停时轻轻抬起的卡片，传达的是“这里可以交互”；而一张滚动时淡入的卡片，什么也没传达。

用过渡表现状态变化。当内容确实因用户操作而出现时，比如展开手风琴、打开弹窗、筛选列表，就该为这段过渡加上动画。它展示了因果关系。这与那种一直存在、却被人为隐藏到你滚动到才出现的内容有本质区别。正如任何处理过常见 UX 反模式的人都知道的，功能性动画与装饰性动画之间的区别极其重要。

忍痛割爱

移除滚动淡入最难的部分不在技术层面，而在于说服利益相关方（或者你自己），让他们相信没有它页面反而更好看。我们已经被训练成把动效与精致感联系在一起。相比带滚动动画的页面，静态页面会让人觉得没做完，但静态页面明明更快、更无障碍、也更好用。

试试这个练习：拿一个滚动淡入占比很高的页面，把所有动画都关掉，让所有内容一次性显示。然后问自己：有没有信息丢失？元素之间的关系是否变得不清晰？页面是不是变得更难理解？答案几乎总是“没有”。那些动画原本只是装饰，内容本身足以立住。

如果你的内容需要靠动画才显得有吸引力，问题不在于缺少动画，而在于内容本身。把内容改好吧。