const html = document.documentElement;
const canvas = document.getElementById("hero-lightpass");
const context = canvas.getContext("2d"); const frameCount = 80;
const currentFrame = index => (
`https://www.pixelraush.de/wp-content/uploads/2024/02/pixelraush-zum-erfolg-bg-2_${index.toString().padStart(5, '0')}.jpg`
) const preloadImages = () => {
for (let i = 1; i {
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()
