如何通过css animation实现滚动视差效果

P粉602998670

发布时间：2025-09-21 12:26:01

792人浏览过

来源于php中文网

原创

答案：CSS animation 难以实现连续滚动视差因其基于时间线、无法响应滚动位置，需结合JavaScript触发入场动画。

如何通过css animation实现滚动视差效果

要说纯粹用CSS

animation

来实现那种随着滚动条平滑移动、不同元素以不同速度变化的“连续滚动视差”，坦白讲，这事儿有点像用扳手去拧螺丝刀的活儿——不是说完全不行，但肯定不是最趁手的工具。我个人觉得，CSS

animation

更擅长的是定义一个动画序列，然后让它在某个条件满足时播放。所以，如果我们把“滚动视差”理解为“当元素进入视口时，以一种有层次感的方式动起来”，那么CSS

animation

就能派上用场了，但这通常需要一些JavaScript的辅助来触发。

解决方案

既然标题点名要用CSS

animation

，那我们就不绕弯子。最直接且实用的做法是：结合JavaScript的

IntersectionObserver

API来检测元素是否进入视口，然后动态地给这些元素添加或移除一个CSS类，这个类会触发我们预设好的CSS

animation

。这样一来，虽然不是传统的“根据滚动位置实时计算位移”，但能实现一种“入场动画式”的视差效果，视觉上同样能带来惊喜。

具体步骤和代码示例：

HTML 结构： 我们假设有一些内容区块，每个区块里有需要视差效果的元素。

<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        background-color: #f4f4f4;
    }
    .hero {
        height: 100vh;
        background: linear-gradient(to bottom, #6dd5ed, #2193b0);
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 3em;
        text-align: center;
    }
    .section {
        padding: 100px 50px;
        min-height: 80vh;
        background-color: white;
        margin-bottom: 20px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        position: relative;
        overflow: hidden; /* 确保子元素动画不溢出 */
    }
    .section:nth-child(even) {
        background-color: #e9ecef;
    }
    .parallax-element {
        opacity: 0;
        transform: translateY(50px);
        transition: transform 0.6s ease-out, opacity 0.6s ease-out; /* 预设过渡，防止闪烁 */
        will-change: transform, opacity; /* 优化性能 */
    }
    .section-title {
        font-size: 2.5em;
        margin-bottom: 40px;
        color: #333;
    }
    .content-block {
        max-width: 800px;
        margin: 0 auto;
        text-align: center;
    }
    .content-block p {
        font-size: 1.1em;
        line-height: 1.6;
        color: #555;
        margin-bottom: 20px;
    }
    .image-container {
        width: 100%;
        height: 300px;
        background-color: #ccc;
        margin-top: 30px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.1); /* 初始放大一点，用于缩放动画 */
        opacity: 0;
        transition: transform 0.8s ease-out, opacity 0.8s ease-out;
        will-change: transform, opacity;
    }

    /* 定义动画 */
    @keyframes slideUpFadeIn {
        from {
            opacity: 0;
            transform: translateY(50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes zoomInFadeIn {
        from {
            opacity: 0;
            transform: scale(1.05);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* 触发动画的类 */
    .parallax-element.is-in-view {
        animation: slideUpFadeIn 0.8s ease-out forwards;
        animation-delay: 0.1s; /* 稍微延迟，增加层次感 */
    }
    .image-container.is-in-view img {
        animation: zoomInFadeIn 1s ease-out forwards;
    }
</style>

<div class="hero">
    <h1>探索视差滚动</h1>
</div>

<div class="section">
    <div class="content-block">
        <h2 class="section-title parallax-element">我们的故事</h2>
        <p class="parallax-element">
            在这个数字化的世界里，我们总是寻求让内容更生动、更具吸引力的方式。视差滚动效果，就是其中一种能让用户眼前一亮的技术。它能将平淡的页面变得富有层次感和深度。
        </p>
        <div class="image-container parallax-element">
            <img src="https://picsum.photos/800/400?random=1" alt="Placeholder Image 1">
        </div>
    </div>
</div>

<div class="section">
    <div class="content-block">
        <h2 class="section-title parallax-element">技术细节</h2>
        <p class="parallax-element">
            实现这种效果，我们利用了CSS动画的强大表现力，并通过JavaScript的`IntersectionObserver`来精确控制动画的触发时机。这确保了动画只在用户真正看到元素时才播放，既节省了资源，又提升了用户体验。
        </p>
        <div class="image-container parallax-element">
            <img src="https://picsum.photos/800/400?random=2" alt="Placeholder Image 2">
        </div>
    </div>
</div>

<div class="section">
    <div class="content-block">
        <h2 class="section-title parallax-element">未来展望</h2>
        <p class="parallax-element">
            视差效果不仅仅是视觉上的享受，它还能引导用户的注意力，创造叙事感。通过巧妙的设计和技术实现，我们可以让网页不再是静态的信息载体，而是动态的、引人入胜的体验。
        </p>
        <div class="image-container parallax-element">
            <img src="https://picsum.photos/800/400?random=3" alt="Placeholder Image 3">
        </div>
    </div>
</div>

JavaScript 逻辑： 使用

IntersectionObserver

监听

.parallax-element

和

.image-container

元素。当它们进入视口时，添加

is-in-view

类；当它们离开视口时，移除这个类（或者只添加一次，取决于你想要的效果）。

document.addEventListener('DOMContentLoaded', () => {
    const observerOptions = {
        root: null, // 视口作为根
        rootMargin: '0px',
        threshold: 0.2 // 当元素20%可见时触发
    };

    const observerCallback = (entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('is-in-view');
                // 如果你希望动画只播放一次，可以在这里取消观察
                // observer.unobserve(entry.target);
            } else {
                // 如果你希望元素离开视口时动画重置，可以移除类
                // entry.target.classList.remove('is-in-view');
            }
        });
    };

    const observer = new IntersectionObserver(observerCallback, observerOptions);

    // 观察所有需要视差效果的元素
    document.querySelectorAll('.parallax-element, .image-container').forEach(element => {
        observer.observe(element);
    });
});

这个方案的核心在于，我们用CSS

animation

定义了元素“如何动”，用JavaScript

IntersectionObserver

定义了元素“何时动”。这样就巧妙地利用了CSS

animation

的能力，实现了视觉上类似视差的入场效果。当然，这并不是那种背景和前景以不同速度持续滚动的“经典视差”，但它确实是一种基于滚动触发的、富有层次感的动画，在很多场景下已经足够了。

立即学习“前端免费学习笔记（深入）”；

CSS动画在实现连续滚动视差中的局限性是什么？

说实话，当我第一次尝试用纯CSS

animation

来搞连续滚动视差时，很快就碰壁了。这其中的门道，我琢磨了好久才彻底明白。CSS

animation

最根本的局限性在于它是一个基于时间线的动画系统，一旦启动，就会按照预设的

duration

、

timing-function

和

delay

独立运行。它不直接与用户的滚动行为（
scrollY
）挂钩。

具体来说，它的局限性体现在几个方面：

Cardify卡片工坊

使用Markdown一键生成精美的小红书知识卡片

下载

脱离滚动条的控制： CSS
```
animation
```
无法直接感知或响应滚动条的位置变化。你不能写一个
```
@keyframes
```
动画，然后告诉它“当滚动条在0px时，元素在这里；当滚动条在100px时，元素在那里”。它的动画进度是线性的或由
```
timing-function
```
决定的，而不是由滚动条的物理位移决定的。
性能与平滑度： 即使我们尝试通过JavaScript频繁地修改
```
animation-delay
```
或
```
animation-play-state
```
来模拟与滚动的关联，这种做法也往往效率不高。频繁的DOM操作和样式计算会导致浏览器反复进行重排（reflow）和重绘（repaint），尤其是在滚动事件这种高频触发的场景下，很容易造成页面卡顿、不流畅，用户体验会大打折扣。真正的连续视差需要的是在每一帧滚动时都能无缝更新元素位置，而CSS
```
animation
```
的设计初衷并非为此。
复杂性与维护： 如果要实现多层、不同速度的连续视差效果，用CSS
```
animation
```
配合JS来动态调整，其逻辑会变得异常复杂。你需要精确计算每个元素的
```
animation-delay
```
或
```
animation-duration
```
，并使其与滚动位置匹配，这几乎是在用“动画”的壳子去模拟“实时计算位移”的核，得不偿失，而且后续维护起来简直是噩梦。
离散性而非连续性： CSS
```
animation
```
更适合于触发一次性或循环性的离散动画，比如元素入场、按钮点击效果、加载动画等。而连续滚动视差需要的是元素位置随着滚动条的移动而持续、平滑地变化，这是一个连续的、与用户交互直接关联的过程，这与
```
animation
```
的设计哲学相悖。

所以，如果你的目标是那种背景和前景元素以不同速度“漂浮”的经典连续视差效果，那么，我个人经验是，请果断放弃纯CSS

animation

的思路，转而考虑更适合的方案。

除了CSS动画，还有哪些主流技术可以实现更流畅的滚动视差？

既然纯CSS

animation

在连续滚动视差上显得力不从心，那我们肯定得寻找更合适的工具。在我看来，目前实现流畅滚动视差的主流技术，基本上都离不开JavaScript与CSS

transform

的协同作用。

JavaScript + CSS
```
transform
```
(最主流且灵活的方式)： 这是目前实现复杂、流畅视差效果的黄金组合。
- 核心原理： 通过JavaScript监听
```
scroll
```
  事件（或者更推荐使用
```
requestAnimationFrame
```
  来优化性能），获取当前的
```
window.scrollY
```
  值。
- 计算位移： 根据
```
window.scrollY
```
  和每个元素的起始位置、期望的视差速度（通常是一个乘数），计算出元素新的
```
transform
```
  属性值，比如
```
translateY
```
  、
```
translateX
```
  、
```
scale
```
  、
```
rotate
```
  等。
- 应用样式： 将计算出的
```
transform
```
  值应用到元素的
```
style
```
  属性上。为了利用GPU加速，我们通常会使用
```
transform: translate3d(0, Ypx, 0)
```
  而不是
```
translateY(Ypx)
```
  ，因为它能将元素提升到独立的渲染层。
- 优点： 极度灵活，可以实现各种复杂的视差效果；性能优秀（尤其配合
```
translate3d
```
  和
```
requestAnimationFrame
```
  ）；社区有大量成熟的库和框架支持。
- 缺点： 需要编写JavaScript代码，增加了项目复杂性；如果优化不当，仍然可能导致性能问题。
- 常用库：
  - GSAP (GreenSock Animation Platform) + ScrollTrigger： 这是我个人最推荐的组合。GSAP是业界领先的动画库，性能卓越，API强大。ScrollTrigger是GSAP的插件，专门用于根据滚动位置触发和控制动画，它能让你用极少的代码实现非常复杂的视差和滚动交互，而且性能优化做得非常好。
  - ScrollMagic： 也是一个非常流行的滚动交互库，功能强大，但相比GSAP+ScrollTrigger，其API学习曲线可能略陡峭，且更新频率不如GSAP。
  - Vanilla JavaScript (自定义实现)： 对于简单的视差效果，完全可以自己编写JavaScript代码来实现，这有助于深入理解其原理。
```
background-attachment: fixed;
```
(最简单、经典的背景视差)： 这可能是最古老、最简单的“视差”效果。它不是动态的，但确实能让背景图片在内容滚动时保持固定，从而产生一种背景“慢于”前景滚动的错觉。
- 优点： 纯CSS实现，无需JavaScript，兼容性极好，性能最佳。
- 缺点： 只能应用于背景图片，效果单一，无法实现前景元素的复杂视差。
CSS
```
scroll-snap
```
(用于滚动到指定位置的“段落式”视差)：
```
scroll-snap
```
本身不是为了实现连续视差，而是为了让用户滚动时，页面能“吸附”到某个指定位置。但结合其他CSS
```
transform
```
效果，它可以创造出一种“分段式”的视差体验，例如当一个区域完全进入视口时，其中的元素才开始动画或调整位置。
- 优点： 纯CSS控制滚动行为，用户体验流畅。
- 缺点： 不适用于连续、平滑的背景/前景视差，更适合于页面分段展示内容。

在我看来，如果你追求的是那种能让用户“哇”一声的流畅、多层、自定义程度高的滚动视差，那么JavaScript结合CSS

transform

，尤其是配合像GSAP这样的专业库，绝对是你的首选。它虽然增加了JavaScript的介入，但换来的是无与伦比的控制力、流畅度和开发效率。

在实际项目中，如何选择合适的视差实现方案并优化性能？

在实际项目中，选择合适的视差方案，我个人觉得，首先得回归到需求本身，然后才是技术选型和性能优化。这就像盖房子，你得先知道要盖什么样的房子，才能决定用什么材料和施工方法。

1. 需求分析与方案选择：

效果的复杂程度？
- 仅需背景固定？ 如果只是想让背景图片在内容滚动时保持不动，创造一种简单的深度感，那么
```
background-attachment: fixed;
```
  是最简单、性能最好的选择，无需任何JavaScript。
- 元素入场动画？ 如果你想要的是当元素进入视口时，它们以一种有层次感的方式（比如从底部滑入、淡入、放大等）动起来，那么我在“解决方案”中提到的
```
IntersectionObserver
```
  + CSS
```
animation
```
  方案就非常合适。它既利用了CSS动画的表达力，又避免了复杂的JS计算。
- 连续、平滑、多层级视差？ 如果你的设计稿要求背景、前景、文字等元素在滚动过程中以不同速度持续移动，形成一种动态的立体感，那么毫无疑问，你需要 JavaScript + CSS
  transform
  。这是实现这类效果的唯一可靠且高性能的途径。对于复杂的交互，强烈