请求：基于Waypoints实现图片滚动中点的透明度淡出/淡入过渡

嘿，我来帮你搞定这个滚动时图片淡入淡出的问题！既然你已经用Waypoints搞定了触发点，接下来核心就是基于滚动进度动态计算透明度——直接控制opacity是最简洁高效的方案，遮罩层只适合有特殊视觉需求的场景，下面给你详细拆解：

优先方案：直接控制图片的opacity #

这个方案逻辑清晰，性能开销小，是最推荐的做法。核心思路是：

1. 用Waypoints标记「进入淡出范围」的状态（比如图片中点进入视口时）
2. 监听滚动事件，根据当前滚动位置在淡出范围内的占比，动态计算透明度值

具体代码实现 #

HTML结构

<div class="image-wrapper">
  <img src="your-image.jpg" class="scroll-fade-img" alt="需要淡入淡出的图片">
</div>

JavaScript结合Waypoints

const fadeImg = document.querySelector('.scroll-fade-img');
// 计算关键位置：图片中点位置（Waypoints触发点）、淡出完成的位置（图片底部离开视口）
const imgMidpoint = fadeImg.offsetTop + fadeImg.offsetHeight / 2;
const fadeFinishPoint = fadeImg.offsetTop + fadeImg.offsetHeight;

// 用Waypoints标记是否进入淡出范围
new Waypoint({
  element: fadeImg,
  handler: function(direction) {
    if (direction === 'down') {
      fadeImg.classList.add('is-fading');
    } else {
      // 向上滚动离开范围时，直接恢复全透明度
      fadeImg.classList.remove('is-fading');
      fadeImg.style.opacity = 1;
    }
  },
  offset: '50%' // 触发点设置为图片中点进入视口
});

// 监听滚动，动态计算透明度（加节流优化性能）
let isTicking = false;
window.addEventListener('scroll', () => {
  if (!isTicking && fadeImg.classList.contains('is-fading')) {
    window.requestAnimationFrame(() => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      // 计算当前滚动位置在淡出区间内的进度（0到1）
      const fadeProgress = Math.max(0, (scrollTop - imgMidpoint) / (fadeFinishPoint - imgMidpoint));
      // 透明度 = 1 - 进度，确保不会小于0
      fadeImg.style.opacity = Math.max(0, 1 - fadeProgress);
      isTicking = false;
    });
    isTicking = true;
  }
});

可选CSS优化（平滑过渡）

给图片加个过渡效果，让淡入淡出更自然：

.scroll-fade-img {
  transition: opacity 0.1s linear; /* 短过渡时间避免滚动卡顿 */
}

备选方案：遮罩层实现 #

如果你的场景需要特殊效果（比如渐变遮罩），可以用遮罩层，但需要保证遮罩背景色和页面背景一致，否则会有违和感：

代码示例 #

HTML结构

<div class="image-wrapper">
  <img src="your-image.jpg" alt="需要淡入淡出的图片">
  <div class="fade-mask"></div>
</div>

CSS

.image-wrapper {
  position: relative;
  overflow: hidden;
}
.fade-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff; /* 匹配你的页面背景色 */
  opacity: 0;
  transition: opacity 0.1s linear;
}

JavaScript逻辑

和上面的opacity方案几乎一致，只是把控制图片opacity改成控制遮罩的opacity从0到1（滚动向下时），向上滚动时恢复0即可。

关键注意点 #

• 滚动事件一定要做节流（比如用requestAnimationFrame），避免频繁触发导致页面卡顿
• 计算位置时，要考虑页面布局的动态变化（比如有固定导航栏时，需要调整偏移值）
• 如果是多张图片，建议把逻辑封装成函数，批量处理

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