首页 > 文章 > 前端

JavaScript与CSS实现滚动视差效果

时间：2025-10-04 21:06:34 458浏览收藏

推广推荐

支持 PC / 移动端，安全直达

想要为你的网站添加引人注目的视觉效果吗？本文将深入探讨如何利用 **JavaScript** 和 **CSS** 实现令人惊艳的**视差滚动效果**。我们将详细讲解视差滚动的原理，即通过使背景图像比前景图像移动速度慢，从而在滚动时产生深度感。文章将提供清晰的代码示例，展示如何通过监听 `scroll` 事件并动态调整元素的 `left` 属性来创建这种效果。同时，我们还会讨论其他关键的 CSS 属性，例如 `position` 和 `z-index`，它们如何影响视差滚动效果的呈现。无论你是前端开发新手还是经验丰富的开发者，都能从中获得实用的技巧和灵感，为你的网页设计增添一份独特的魅力。快来学习如何用简单的代码实现惊艳的视差滚动效果吧！

使用 JavaScript 和 CSS 实现视差滚动效果

本文将介绍如何使用 JavaScript 和 CSS 实现简单的视差滚动效果。通过监听滚动事件并动态调整元素的 left 属性，可以创建元素随页面滚动而移动的视觉效果。文章将提供基本代码示例，并讨论影响视差效果的其他 CSS 属性。

视差滚动效果原理

视差滚动是一种网页设计技巧，通过使背景图像比前景图像移动得更慢，从而在滚动时产生深度感。简单的实现方式是使用 JavaScript 监听 scroll 事件，并根据滚动距离调整元素的 left 或 top 属性。

实现步骤

HTML 结构: 创建包含需要应用视差效果的元素的 HTML 结构。

<section>
  <img src="image1.jpg" id="first">
  <img src="image2.jpg" id="second">
</section>

CSS 样式: 设置元素的 position 属性为 absolute，以便可以通过 left 和 top 属性进行定位。确保包含视差效果的 section 元素具有 position: relative 属性。

section {
  position: relative;
  width: 100%;
  height: 100vh; /* 视口高度 */
  overflow: hidden; /* 防止内容溢出 */
}

section img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图像填充方式 */
}

JavaScript 代码: 监听 window 对象的 scroll 事件，并在事件处理函数中修改元素的 left 属性。
```
window.addEventListener('scroll', function() {
  const scrollY = window.scrollY;
  const secondImage = document.getElementById("second");

  secondImage.style.left = scrollY * 0.5 + 'px'; // 调整滚动速度
});
```
在上述代码中，window.scrollY 获取垂直滚动条的位置。通过将 scrollY 乘以一个系数（例如 0.5），可以控制元素的移动速度，从而实现视差效果。系数小于 1 时，元素移动速度慢于滚动速度，产生视差效果。

完整示例

<!DOCTYPE html>
<html>
<head>
  <title>视差滚动示例</title>
  <style>
    body {
      margin: 0;
      height: 200vh; /* 创建滚动空间 */
    }

    section {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }

    section img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    #second {
      z-index: 1; /* 确保在第一张图片之上 */
    }
  </style>
</head>
<body>
  <section>
    <img src="https://picsum.photos/id/1/1920/1080" id="first">
    <img src="https://picsum.photos/id/2/1920/1080" id="second">
  </section>

  <script>
    window.addEventListener('scroll', function() {
      const scrollY = window.scrollY;
      const secondImage = document.getElementById("second");

      secondImage.style.left = scrollY * 0.5 + 'px';
    });
  </script>
</body>
</html>

在这个示例中，两张图片都铺满了整个 section。当页面滚动时，second 图片会以滚动速度的一半向左移动，从而产生视差效果。

注意事项

性能优化: 频繁的 scroll 事件处理可能会影响性能。可以使用 requestAnimationFrame 来优化滚动事件处理，减少不必要的重绘。
兼容性: 确保代码在不同的浏览器中都能正常工作。
移动端: 在移动设备上测试视差效果，并根据需要进行调整。
z-index: 使用 z-index 属性控制元素的层叠顺序，确保视差效果正确显示。
图片资源: 使用适当大小和质量的图片，以避免加载缓慢或性能问题。

总结

通过结合 CSS 的定位和 JavaScript 的事件监听，可以轻松实现基本的视差滚动效果。通过调整滚动速度系数和其他 CSS 属性，可以创建各种各样的视觉效果。在实际应用中，请注意性能优化和兼容性问题。

今天关于《JavaScript与CSS实现滚动视差效果》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！