为滚动动画元素添加延迟效果-html教程-PHP中文网

为滚动动画元素添加延迟效果

DDD

发布： 2025-08-19 16:46:01

原创

858人浏览过

为滚动动画元素添加延迟效果

本文旨在解决在网页滚动时，同一行的元素同时出现动画效果的问题。通过JavaScript代码，为每个元素添加基于其索引的延迟，从而实现元素依次出现的动画效果，提升用户体验。本文将提供修改后的代码示例，并解释其实现原理和注意事项。

实现原理

核心思路是在原有的滚动监听和元素显示逻辑的基础上，引入setTimeout函数，根据元素在其父容器中的索引，设置不同的延迟时间。这样，当滚动到可视区域时，元素不会立即显示，而是按照预设的延迟依次出现，从而产生错落有致的动画效果。

代码实现

以下是修改后的 JavaScript 代码，实现了为每个 .reveal 元素添加基于其索引的延迟效果：

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

登录后复制

代码解释:

萌动AI

CreateAI旗下AI动漫视频生成平台

438

查看详情

获取容器： 首先，使用 document.querySelectorAll(".container") 获取所有包含需要动画元素的容器。
遍历容器： 使用 forEach 循环遍历每个容器。
获取元素： 在每个容器内部，使用 container.querySelectorAll(".reveal") 获取所有需要动画的元素。
遍历元素： 再次使用 forEach 循环遍历每个元素，并获取其索引 index。
判断是否可见： 计算元素顶部距离视窗顶部的距离 elementTop，并判断是否小于可见范围 visibilityLimit。
添加延迟： 如果元素可见，则使用 setTimeout 函数，在 index * 250 毫秒后，为元素添加 active 类，触发动画效果。
移除类： 如果元素不可见，则移除 active 类，使其保持隐藏状态。

HTML 结构

HTML 结构保持不变，关键在于使用 .container 作为每个元素组的父容器，.reveal 类用于标记需要动画的元素。

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

登录后复制

CSS 样式

CSS 样式与原代码基本一致，.reveal 类控制元素的初始状态和过渡效果，.reveal.active 类控制元素显示时的状态。

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

登录后复制

注意事项

延迟时间： index * 250 中的 250 是延迟时间，单位为毫秒。可以根据实际需求调整这个值，以获得最佳的动画效果。
性能优化： 如果页面上的元素很多，频繁的 getBoundingClientRect() 调用可能会影响性能。可以考虑使用节流或防抖技术来优化滚动监听函数。
兼容性： getBoundingClientRect() 方法在所有主流浏览器中都得到支持。