为滚动显示动画添加元素延迟-小浪学习网

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

本文旨在解决在滚动显示动画中，如何为同一行的元素添加延迟，使得它们能够依次出现，而不是同时出现。通过修改JavaScript代码，利用setTimeout函数，根据元素在容器中的索引，实现延迟效果，从而优化用户体验，尤其是在桌面端展示时。

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

在网页设计中，滚动显示动画是一种常见的交互效果，可以提升用户体验。然而，当同一行的元素同时出现时，视觉效果可能会显得单调。本教程将介绍如何为这些元素添加延迟，使其依次显示，从而增强动画的层次感。

核心思路

核心思路是利用 JavaScript 的 setTimeout 函数，为每个需要延迟显示的元素设置一个基于其索引的延迟时间。这样，当元素进入可视区域时，它们将按照设定的延迟时间依次显示。

具体实现步骤

html 结构

首先，确保你的 HTML 结构包含一个容器（例如，.container），该容器包含多个需要延迟显示的元素（例如，.reveal）。

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

JavaScript 代码

修改 JavaScript 代码，使用 setTimeout 函数为每个 .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);

这段代码首先获取所有 .container 元素，然后遍历每个容器中的 .reveal 元素。对于每个 .reveal 元素，计算其距离视窗顶部的距离，如果该距离小于 visibilityLimit，则使用 setTimeout 函数延迟一段时间后添加 active 类，从而触发显示动画。延迟时间基于元素在容器中的索引乘以一个固定的延迟间隔（例如，250 毫秒）。