Content befor or after Javascript scroll-effect

Question

I have a Javascript scroll effect on a test page. everything works so far. However, I would like to place further content before or after this scroll effect, i.e. at the end of the scroll effect it should be possible to scroll the all page. Currently the following content appears on the images of the scroll effect. Who can help here? I am not very familiar with Javascript... My code are:

I have already tried to pack the canvas into two div-containers. the first container has a height of 100vh and in it a container with 300vh and after that comes canvas.

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

const frameCount = 45;
const currentFrame = index => (
  `https://www.in-visionen.de/Werbeagentur/Test/360_assets/Test/images/Werbeagentur${index.toString().padStart(4, '0')}.jpg`
)

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=3840;
canvas.height=2160;
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()

.art {
 height: 100vh;
}

.design {
 height: 300vh;
}

canvas {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 100vw;
  max-height: 100vh;
}

<div class="art">
<div class="design">
<canvas id="3d">
</canvas>
</div>
</div>