I have the following code, which I have integrated as an iframe. By scrolling, images are loaded one after the other. after the last image, I would like the page to continue scrolling, as I have more content at the bottom. it does that, but I either have to move the mouse a little and scroll or scroll several times. does anyone have a solution for this?
<code><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<style>
.art {
height: 100vh;
}
.design {
height: 200vh;
}
canvas {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 80vw;
max-height: 80vh;
}
</style>
</head>
<body>
<div class="art">
<div class="design">
<canvas id="3d">
</canvas>
</div>
</div>
<script language="javascript" type="text/javascript">
const html = document.documentElement;
const canvas = document.getElementById("3d");
const context = canvas.getContext("2d");
const frameCount = 27;
const currentFrame = index => (
`https://www.in-visionen.de/Webdesign/Webdesign${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()
</script>
</body>
</html>
</code>
<code><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<style>
.art {
height: 100vh;
}
.design {
height: 200vh;
}
canvas {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 80vw;
max-height: 80vh;
}
</style>
</head>
<body>
<div class="art">
<div class="design">
<canvas id="3d">
</canvas>
</div>
</div>
<script language="javascript" type="text/javascript">
const html = document.documentElement;
const canvas = document.getElementById("3d");
const context = canvas.getContext("2d");
const frameCount = 27;
const currentFrame = index => (
`https://www.in-visionen.de/Webdesign/Webdesign${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()
</script>
</body>
</html>
</code>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<style>
.art {
height: 100vh;
}
.design {
height: 200vh;
}
canvas {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 80vw;
max-height: 80vh;
}
</style>
</head>
<body>
<div class="art">
<div class="design">
<canvas id="3d">
</canvas>
</div>
</div>
<script language="javascript" type="text/javascript">
const html = document.documentElement;
const canvas = document.getElementById("3d");
const context = canvas.getContext("2d");
const frameCount = 27;
const currentFrame = index => (
`https://www.in-visionen.de/Webdesign/Webdesign${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()
</script>
</body>
</html>