滚动时图片淡入淡出效果扩展至三张图的实现问题

原代码仅处理了第一张图片的透明度变化，未对第二、第三张做逻辑控制，且滚动区间仅划分了一段，导致无法触发后续图片的淡入效果。以下是修改后的完整代码及逻辑说明：

HTML（无需修改） #

<div id="filling" style="display: none"></div>

<div id="cover" style="position: fixed">
  <div id="one">
      <img src="https://picsum.photos/id/200/1000/1000" alt="">
  </div>

  <div id="two">
      <img src="https://picsum.photos/id/201/1000/1000" alt="">
  </div>

  <div id="three">
      <img src="https://picsum.photos/id/202/1000/1000" alt="">
  </div>

</div>

CSS（调整层级与图片适配） #

*{
  padding: 0;
  margin: 0;
}

body{
  height: 3500px;
}

img{
  width: 100%;
  height: 100vh;
  object-fit: cover; /* 防止图片拉伸变形 */
}

#filling{
  height: 100vh;
  width: 100%;
}

#cover{
  height: 100vh;
  width: 100%;
}

#cover > div{
  height: 100vh;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0; /* 确保图片容器定位准确 */
}

/* 初始层级：从上到下依次降低，保证切换时视觉层级正确 */
#one{
  z-index: 3;
}

#two{
  z-index: 2;
}

#three{
  z-index: 1;
}

JavaScript（核心滚动逻辑修改） #

const one = document.getElementById('one')
const two = document.getElementById('two')
const three = document.getElementById('three')
const cover = document.getElementById('cover')
const filling = document.getElementById('filling')

window.addEventListener('scroll', () => {
    const scrollPosition = window.scrollY
    const viewportHeight = window.innerHeight
    // 计算滚动进度相对于视口高度的比例，范围0~3
    const scrollRatio = scrollPosition / viewportHeight

    // 重置所有图片透明度为初始值
    one.style.opacity = 1
    two.style.opacity = 1
    three.style.opacity = 1

    if (scrollRatio <= 1) {
        // 第一段滚动：第一张图淡出，第二张图淡入
        one.style.opacity = 1 - scrollRatio
        two.style.opacity = scrollRatio
        cover.style.position = 'fixed'
        filling.style.display = 'none'
    } else if (scrollRatio <= 2) {
        // 第二段滚动：第二张图淡出，第三张图淡入
        two.style.opacity = 2 - scrollRatio
        three.style.opacity = scrollRatio - 1
        cover.style.position = 'fixed'
        filling.style.display = 'none'
    } else if (scrollRatio <= 3) {
        // 第三段滚动：第三张图淡出
        three.style.opacity = 3 - scrollRatio
        cover.style.position = 'fixed'
        filling.style.display = 'none'
    } else {
        // 滚动超过3个视口高度后，取消固定定位并显示填充块
        cover.style.position = 'static'
        filling.style.display = 'block'
    }
})

关键逻辑说明： #

• 将滚动区间划分为0_{1视口高度**、**1}2视口高度、2~3视口高度三个阶段，分别对应三张图片的淡入淡出切换
• 通过scrollRatio计算滚动进度，动态调整对应图片的透明度：前一张图透明度随滚动逐渐降低至0，后一张图透明度随滚动逐渐升高至1
• 调整z-index层级，确保每张图在对应滚动阶段处于视觉最上层，配合透明度变化实现平滑过渡
• 新增object-fit: cover保证图片在容器内保持正确比例，避免拉伸变形

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