如何将视口检测动画函数应用到标题数组，避免代码冗余

问题背景 #

当前代码仅能对单个带.twoH类的标题实现视口检测透明度变化，需要将该效果扩展到所有9个带.animatedHeader类的标题元素，避免重复编写代码。

修改方案 #

核心思路是获取所有目标元素、封装复用检测逻辑、批量遍历处理：

1. 获取所有目标元素
   用document.querySelectorAll('.animatedHeader')替代querySelector，一次性拿到所有9个标题元素组成的NodeList（类似数组的集合）。

2. 封装单个元素的检测逻辑
   把原本针对单个元素的视口检测、透明度设置逻辑抽成独立函数，方便复用。

3. 批量遍历处理所有元素
   在定时任务中遍历每个元素，调用封装好的检测函数完成批量更新。

修改后的完整代码 #

HTML（无需修改）

<div class="textAnimation">
        <span><h2 class="animatedHeader">Text1</h2></span>
        <span
          ><h2 class="animatedHeader twoH">Text2</h2></span
        >
        <span
          ><h2 class="animatedHeader">Text3</h2></span
        >
        <span
          ><h2 class="animatedHeader">text4</h2></span
        >
        <span><h2 class="animatedHeader">text5</h2></span>
        <span><h2 class="animatedHeader">text6</h2></span>
        <span><h2 class="animatedHeader">text7</h2></span>
        <span><h2 class="animatedHeader">text8</h2></span>
        <span><h2 class="animatedHeader">text9</h2></span>
</div>

JavaScript

// 获取所有带animatedHeader类的标题元素
const headers = document.querySelectorAll('.animatedHeader');

// 封装单个元素的视口检测与透明度设置逻辑
function checkElementInViewport(element) {
  const bounding = element.getBoundingClientRect();
  const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
  const viewportHeight = window.innerHeight || document.documentElement.clientHeight;

  if (
    bounding.top >= 0 &&
    bounding.left >= 0 &&
    bounding.right <= viewportWidth &&
    bounding.bottom <= viewportHeight
  ) {
    element.style.opacity = 1;
  } else {
    element.style.opacity = 0.6;
  }
}

// 批量更新所有元素的透明度
function updateAllHeaders() {
  headers.forEach(checkElementInViewport);
}

// 定时检测更新
setInterval(updateAllHeaders, 10);

更高效的优化方案（可选） #

setInterval会每隔10ms强制执行一次，即使页面无交互、元素状态未变化，会造成不必要的性能浪费。推荐使用Intersection Observer API，它会在元素进入/离开视口时自动触发回调，性能更优：

const headers = document.querySelectorAll('.animatedHeader');

// 创建Intersection Observer实例
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 元素完全在视口内时设透明度1，否则设0.6
    entry.target.style.opacity = entry.isIntersecting ? 1 : 0.6;
  });
}, {
  root: null, // 使用浏览器视口作为检测区域
  threshold: 1.0 // 元素完全进入视口时触发回调
});

// 为每个标题元素添加监听
headers.forEach(header => {
  observer.observe(header);
});

该方案无需定时轮询，仅在元素视口状态变化时执行逻辑，更适合生产环境使用。

内容的提问来源于stack exchange，提问作者Šimon Vepřek