如何实现滚动至#wrapper进入视口时才触发的图片序列滚动动画

核心调整逻辑：

• 新增#wrapper元素是否进入视口的判断规则
• 序列帧索引计算基准从「全局页面滚动高度」改为「#wrapper进入视口后的滚动进度」
• 增加边界判定，未进入视口时固定显示第一帧，完全离开视口后固定显示最后一帧

你可以直接替换原有JS代码为下方版本：

var images = [];
// 保留原有预加载逻辑
for (i = 1; i <= $('#load').attr('data-images'); i++) {
  images.push('https://twdp.de/sequence/' + i + '.jpg');
}
$(images).each(function() {
  $('<img class="sequenzbilder" />')[0].src = this;
});

var totalImages = images.length;
var $wrapper = $('#wrapper');
var $viewport = $(window);

// 计算#wrapper位置和动画触发的滚动区间
function calcWrapperPos() {
  var wrapperTop = $wrapper.offset().top;
  var wrapperHeight = $wrapper.outerHeight();
  var viewportHeight = $viewport.height();
  // 动画起始点：#wrapper顶部进入视口底部的滚动位置
  var animStart = wrapperTop - viewportHeight;
  // 动画结束点：#wrapper底部离开视口顶部的滚动位置
  var animEnd = wrapperTop + wrapperHeight;
  // 动画总滚动距离、每帧对应的滚动步长
  return {
    start: animStart,
    end: animEnd,
    step: (animEnd - animStart) / totalImages
  }
}

// 初始化位置参数，窗口尺寸变化时自动重新计算适配
var animParams = calcWrapperPos();
$viewport.on('resize', function() {
  animParams = calcWrapperPos();
})

// 滚动监听逻辑调整
$viewport.on('scroll', function() {
  var currentScroll = $(this).scrollTop();
  var currentImgIndex;
  if (currentScroll < animParams.start) {
    // 未进入动画区域，显示第一张图
    currentImgIndex = 0;
  } else if (currentScroll > animParams.end) {
    // 超出动画区域，显示最后一张图
    currentImgIndex = totalImages - 1;
  } else {
    // 在动画区域内按滚动进度计算当前帧
    currentImgIndex = Math.floor((currentScroll - animParams.start) / animParams.step);
  }
  $('.sequenzbilder').attr('src', images[currentImgIndex]);
});

调整说明：

• 动画触发完全和#wrapper的位置绑定，和页面其他内容长度无关，不会出现元素还没进入视口动画就播放完毕的问题
• 新增窗口resize适配，缩放窗口、旋转移动设备屏幕时动画逻辑依然生效
• 边界处理避免索引越界报错

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