Javascript 奇特的滚动动画（如Apple Airpods pro页面）

我正在尝试通过使用多个图像创建一个类似于Apple Airpods pro页面上的滚动动画

但是正如你所看到的，我对所有的图像都有一个问题，当我滚动时，所有的图像都留在屏幕上

这是我的js文件

 const html = document.documentElement;
 const canvas = document.getElementById("hero-lightpass");
 const context = canvas.getContext("2d");

 const frameCount = 162;
 const currentFrame = index => (
    `images/Women${index.toString().padStart(4, '0')}.png`
    )

 const preloadImages = () => {
  for (let i = 1; i < frameCount; i++) {
     const img = new Image();
     img.src = currentFrame(i);
     }
  };

 const img = new Image()
 img.src = currentFrame(1);
 canvas.width=1158;
 canvas.height=770;
 img.onload=function(){
    context.drawImage(img, 0, 0);
  }

 const updateImage = index => {
    img.src = currentFrame(index);
    context.drawImage(img, 0, 0);
  }

  window.addEventListener('scroll', () => {
    const scrollTop = html.scrollTop;
    const maxScrollTop = html.scrollHeight - window.innerHeight;
    const scrollFraction = scrollTop / maxScrollTop;
    const frameIndex = Math.min(
      frameCount - 1,
       Math.ceil(scrollFraction * frameCount)
    );

    requestAnimationFrame(() => updateImage(frameIndex + 1))
  });

  preloadImages()`

consthtml=document.documentElement；
const canvas=document.getElementById（“hero lightpass”）；
const context=canvas.getContext（“2d”）；
const frameCount=162；
const currentFrame=索引=>(
`images/Women${index.toString（）.padStart（4，'0'）}.png`
)
常量预加载图像=（）=>{
for（设i=1；i{
img.src=当前帧（索引）；
drawImage（img，0,0）；
}
window.addEventListener（'scroll'，（）=>{
const scrollTop=html.scrollTop；
const maxScrollTop=html.scrollHeight-window.innerHeight；
常量scrollFraction=scrollTop/maxScrollTop；
const frameIndex=Math.min(
帧数-1，
Math.ceil（滚动分数*帧数）
);
requestAnimationFrame（（）=>updateImage（frameIndex+1））
});
预加载图像（）`

您需要在每次迭代时查看画布，考虑使用

并跳转到帧，因为加载和渲染图像会导致浏览器结巴。