使用 JavaScript 和 CSS 实现视差滚动效果-html教程-PHP中文网

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

DDD

发布： 2025-09-17 21:41:00

原创

753人浏览过

使用 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 属性。

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

豆绘AI
豆绘AI是国内领先的AI绘图与设计平台，支持照片、设计、绘画的一键生成。

485

查看详情
```
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 图片会以滚动速度的一半向左移动，从而产生视差效果。