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

JavaScript实现滚动动画元素延迟显示

碧海醫心

发布： 2025-08-19 17:04:12

原创

701人浏览过

javascript实现滚动动画元素延迟显示

本文介绍如何使用JavaScript为滚动动画中的元素添加延迟效果，使得同一行的元素依次出现，从而增强视觉体验。通过修改原有的滚动监听函数，并结合setTimeout函数，可以轻松实现元素之间的延迟显示，让网页动画更加生动有趣。

实现滚动动画元素延迟显示的步骤

1. HTML 结构

首先，确保你的HTML结构包含需要动画的元素，并且这些元素都具有相同的类名（例如 reveal），并且被包含在一个容器中（例如 container）。

<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>

登录后复制

2. CSS 样式

为 reveal 类添加初始状态和激活状态的样式，包括隐藏元素和过渡效果。

* {
  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;
}

登录后复制

3. JavaScript 代码

修改原有的 reveal 函数，使其能够为同一容器内的元素添加延迟。关键在于使用 setTimeout 函数，并根据元素在容器中的索引来计算延迟时间。

灵感PPT

AI灵感PPT - 免费一键PPT生成工具

226

查看详情

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

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);

登录后复制

这段代码首先获取所有包含 reveal 元素的容器。然后，遍历每个容器，获取其中的 reveal 元素。对于每个 reveal 元素，计算其距离视窗顶部的距离，如果该元素进入可视区域，则使用 setTimeout 函数延迟添加 active 类，延迟时间与元素在容器中的索引成正比。

代码解释

document.querySelectorAll(".container"): 获取所有类名为 container 的元素。
container.querySelectorAll(".reveal"): 获取当前容器内所有类名为 reveal 的元素。
index * 250: 计算延迟时间，这里 250 毫秒是每个元素之间的延迟间隔，可以根据需要调整。
setTimeout(() => { reveal.classList.add("active") }, index * 250): 延迟执行添加 active 类的操作。

4. 注意事项

性能优化: 如果页面上的动画元素过多，大量的 setTimeout 可能会影响性能。可以考虑使用节流（throttling）或防抖（debouncing）技术来优化滚动事件的处理。
延迟时间: 延迟时间 250 毫秒是一个示例值，需要根据实际情况调整，以达到最佳的视觉效果。
容器选择器: .container 选择器需要根据你的HTML结构进行调整，确保能够正确选中包含动画元素的容器。