JavaScript 实现元素滚动动画延迟效果-html教程-PHP中文网

JavaScript 实现元素滚动动画延迟效果

聖光之護

发布： 2025-08-19 16:54:16

原创

657人浏览过

javascript 实现元素滚动动画延迟效果

本文介绍了如何使用 JavaScript 为滚动动画中的元素添加延迟效果，解决同排元素同时出现的问题，提升用户体验。通过修改 JavaScript 代码，利用 setTimeout 函数，根据元素在容器中的索引设置不同的延迟时间，从而实现元素依次显示的动画效果。

为滚动动画添加元素延迟显示

在网页设计中，滚动动画是一种常见的交互方式，可以增强用户体验。然而，当同一行或同一区域的元素同时出现时，可能会显得过于突兀。为了解决这个问题，我们可以为每个元素添加一个小的延迟，使其依次显示，从而产生更流畅、更吸引人的视觉效果。

实现方法

核心思路是利用 JavaScript 的 setTimeout 函数，结合元素在其父容器中的索引，为每个元素设置不同的延迟时间。下面是具体的实现步骤：

修改 JavaScript 代码:

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

首先，我们需要修改原有的 JavaScript 代码，以便能够为每个元素添加延迟。修改后的代码如下：
```
function reveal() {
  const windowHeight = window.innerHeight;
  const elementVisible = 150;
  const visibilityLimit = windowHeight - elementVisible;
  const containers = document.querySelectorAll(".container");

  containers.forEach(container => {
    const reveals = container.querySelectorAll(".reveal");
    reveals.forEach((reveal, index) => {
      const elementTop = reveal.getBoundingClientRect().top;
      if (elementTop < visibilityLimit) {
        setTimeout(() => {
          reveal.classList.add("active")
        }, index * 250);
      } else {
        reveal.classList.remove("active");
      }
    });
  });
}

window.addEventListener("scroll", reveal);
```
登录后复制
这段代码的关键在于：

ChatBA
AI幻灯片生成工具

74

查看详情
- 首先获取所有包含需要动画元素的 .container 容器。
- 然后，针对每个容器，获取其中所有需要添加动画的 .reveal 元素。
- 使用 forEach 循环遍历每个 .reveal 元素，并获取其索引 index。
- 在元素进入可视区域后，使用 setTimeout 函数延迟添加 active 类，延迟时间为 index * 250 毫秒。这意味着第一个元素没有延迟，第二个元素延迟 250 毫秒，第三个元素延迟 500 毫秒，以此类推。

HTML 结构:

HTML 结构保持不变，确保每个需要动画的元素都具有 reveal 类，并且位于一个包含它们的 .container 容器内。例如：

<section>
  <div class="container">
    <h2>Caption</h2>
    <div class="text-container">
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
    </div>
  </div>
</section>

登录后复制

CSS 样式:

CSS 样式也保持不变，主要定义了元素的初始状态和激活状态的样式。例如：

.reveal{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active{
  transform: translateY(0);
  opacity: 1;
}

登录后复制

代码示例

完整的代码示例，包括 HTML、CSS 和 JavaScript，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll Reveal with Delay</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Arial", sans-serif;
    }

    body {
      background: #42455a;
    }

    section {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    section:nth-child(1) {
      color: #e0ffff;
    }

    section:nth-child(2) {
      color: #42455a;
      background: #e0ffff;
    }

    section:nth-child(3) {
      color: #e0ffff;
    }

    section:nth-child(4) {
      color: #42455a;
      background: #e0ffff;
    }

    section .container {
      margin: 100px;
    }

    section h1 {
      font-size: 3rem;
      margin: 20px;
    }

    section h2 {
      font-size: 40px;
      text-align: center;
      text-transform: uppercase;
    }

    section .text-container {
      display: flex;
    }

    section .text-container .text-box {
      margin: 20px;
      padding: 20px;
      background: #00c2cb;
    }

    section .text-container .text-box h3 {
      font-size: 30px;
      text-align: center;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    @media (max-width: 900px) {
      section h1 {
        font-size: 2rem;
        text-align: center;
      }
      section .text-container {
        flex-direction: column;
      }
    }

    .reveal {
      position: relative;
      transform: translateY(150px);
      opacity: 0;
      transition: 1s all ease;
    }

    .reveal.active {
      transform: translateY(0);
      opacity: 1;
    }
  </style>
</head>
<body>

  <section>
    <h1>Scroll Down to Reveal Elements &#8595;</h1>
  </section>
  <section>
    <div class="container">
      <h2>Caption</h2>
      <div class="text-container">
        <div class="text-box reveal">
          <h3>Section Text</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            eius molestiae perferendis eos provident vitae iste.
          </p>
        </div>
        <div class="text-box reveal">
          <h3>Section Text</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            eius molestiae perferendis eos provident vitae iste.
          </p>
        </div>
        <div class="text-box reveal">
          <h3>Section Text</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            eius molestiae perferendis eos provident vitae iste.
          </p>
        </div>
      </div>
    </div>
  </section>

  <section>
    <div class="container">
      <h2>Caption</h2>
      <div class="text-container">
        <div class="text-box reveal">
          <h3>Section Text</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            eius molestiae perferendis eos provident vitae iste.
          </p>
        </div>
        <div class="text-box reveal">
          <h3>Section Text</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            eius molestiae perferendis eos provident vitae iste.
          </p>
        </div>
        <div class="text-box reveal">
          <h3>Section Text</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            eius molestiae perferendis eos provident vitae iste.
          </p>
        </div>
      </div>
    </div>
  </section>

  <section>
    <div class="container">
      <h2>Caption</h2>
      <div class="text-container">
        <div class="text-box reveal">
          <h3>Section Text</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            eius molestiae perferendis eos provident vitae iste.
          </p>
        </div>
        <div class="text-box reveal">
          <h3>Section Text</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            eius molestiae perferendis eos provident vitae iste.
          </p>
        </div>
        <div class="text-box reveal">
          <h3>Section Text</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            eius molestiae perferendis eos provident vitae iste.
          </p>
        </div>
      </div>
    </div>
  </section>

  <script>
    function reveal() {
      const windowHeight = window.innerHeight;
      const elementVisible = 150;
      const visibilityLimit = windowHeight - elementVisible;
      const containers = document.querySelectorAll(".container");

      containers.forEach(container => {
        const reveals = container.querySelectorAll(".reveal");
        reveals.forEach((reveal, index) => {
          const elementTop = reveal.getBoundingClientRect().top;
          if (elementTop < visibilityLimit) {
            setTimeout(() => {
              reveal.classList.add("active")
            }, index * 250);
          } else {
            reveal.classList.remove("active");
          }
        });
      });
    }

    window.addEventListener("scroll", reveal);
  </script>

</body>
</html>

登录后复制

注意事项

延迟时间: index * 250 中的 250 是延迟的时间间隔，单位为毫秒。可以根据实际需要调整这个值，以达到最佳的视觉效果。
容器选择器: 代码中使用了 .container 作为容器选择器，请确保你的 HTML 结构与此一致。如果你的容器类名不同，需要相应地修改 JavaScript 代码。
性能优化: 如果页面中需要添加动画的元素非常多，过多的 setTimeout 调用可能会影响性能。可以考虑使用 requestAnimationFrame 来优化动画效果。