如何用JS实现滚动触发两张图片同时淡入？自定义代码仅单张生效

• 全局作用域下重复声明同名的opacity、intervalID变量，以及fadeIn、show函数，后写的声明会完全覆盖前写的内容，运行时实际只有star2对应的淡入逻辑生效
• 两次给window.onload绑定回调，后一次的绑定会覆盖前一次，根本无法同时触发两个元素的初始淡入
• 未实现滚动检测逻辑，不满足“滚动到对应区块才触发淡入”的需求
• 手动通过定时器逐帧修改透明度的写法冗余，容易出现不同步问题

可落地实现方案 #

整体用CSS过渡统一控制淡入动画效果，配合浏览器原生视口观察API实现滚动触发，保证两个元素动画完全同步，无第三方依赖。

调整后的CSS代码 #

/* 通用淡入元素初始状态 */
.fade-img {
  opacity: 0;
  width: 100px;
  height: 100px;
  /* 统一设置动画时长与缓动规则，保障同步效果 */
  transition: opacity 0.6s ease-in-out;
}
/* 触发显示的状态类 */
.fade-img.is-visible {
  opacity: 1;
}
/* 保留原有布局规则 */
#star1 {
  float: left;
}
#star2 {
  float: right;
}

替换后的JS代码 #

// 选中所有需要淡入的图片元素
const fadeTargets = document.querySelectorAll('.fade-img');

// 初始化视口观察器：元素露出10%即触发淡入
const viewObserver = new IntersectionObserver((entries) => {
  entries.forEach(item => {
    if (item.isIntersecting) {
      // 为元素添加可见类，触发CSS过渡动画
      item.target.classList.add('is-visible');
      // 触发后停止观察该元素，减少性能消耗
      viewObserver.unobserve(item.target);
    }
  })
}, { threshold: 0.1 });

// 为每个目标元素绑定观察监听
fadeTargets.forEach(target => viewObserver.observe(target));

调整后的HTML结构 #

仅需给两张图片加上通用淡入类名即可，原有id、图片地址、alt内容全部保留：

<div>
  <img class="fade-img" id="star1" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png" alt="star123"> 
</div> 
<div> 
  <img class="fade-img" id="star2" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png" alt="123star">
</div>

实现效果说明：两个图片使用完全一致的过渡参数，会在同一轮观察回调中被添加可见类，淡入动画完全同步，不会出现先后错位。触发逻辑完全基于元素是否进入用户可见视口，满足滚动到对应区块才开始淡入的需求。

内容的提问来源于stack exchange，提问作者Lakshay Kalra