Добавьте содержимое после холста ⇐ CSS

[Anonymous]

Я пытаюсь создать веб-страницу, на которой будут отображаться изображения, связанные с прокруткой. Я могу отображать контент поверх холста, и анимация работает нормально.
Что я не могу сделать, так это добавить контент ПОСЛЕ холста. Как только холст и окно закончатся, я хочу отобразить . Полоса прокрутки должна появиться при загрузке страницы, и я смогу прокрутить еще немного, чтобы увидеть .
Есть идеи?

Код: Выделить всё

const html = document.documentElement;
const canvas = document.querySelector('.ultragear-scrolling');
const context = canvas.getContext('2d');
const overlay = document.querySelector('.overlay');
const message = document.querySelector('.message');
const content = document.querySelector('.content');

const currentFrame = index => (
`https://gi.esmplus.com/BLADER01/Hyuk/oled-moon/${index.toString().padStart(0, '1')}.jpg`
);

// frameCount= Number of image
const frameCount = 294;

// set canvas dimensions
canvas.height = 770;
canvas.width = 1158;

const images = [];

// Preload images
const preloadImages = () => {
for (let i = 1; i  {
// Clear the previous image
context.clearRect(0, 0, canvas.width, canvas.height);

// Draw the new image
drawCentered(images[index]);

};

function drawCentered(img) {
const offsetX = (canvas.width - img.width) / 2;
const offsetY = (canvas.height - img.height) / 2;
context.drawImage(img, offsetX, offsetY);
}

let animationFrameId;

window.addEventListener('scroll', () => {
cancelAnimationFrame(animationFrameId);

const scrollTop = html.scrollTop;
const maxScrollTop = html.scrollHeight - window.innerHeight;
const scrollFraction = scrollTop / maxScrollTop;
const frameIndex = Math.min(
frameCount - 1,
Math.floor(scrollFraction * frameCount)
);

animationFrameId = requestAnimationFrame(() => updateImage(frameIndex));

if (frameIndex === frameCount - 1) {
canvas.style.transition = 'opacity 1s ease-in-out';
canvas.style.opacity = '0';
overlay.classList.add('visible');
message.classList.add('visible');

// Delay showing the content to ensure the message is fully visible
setTimeout(() => {
content.classList.add('visible');
}, 1000); // Adjust delay as needed
} else {
canvas.style.opacity = '1';
overlay.classList.remove('visible');
message.classList.remove('visible');
content.classList.remove('visible');
}
});

Код: Выделить всё

html {
height: 2000vh;
}

body {
background: #000;
height: 2000vh;
margin: 0;
}

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

.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 1s ease-in-out;
pointer-events: none;
background: #000;
}

.message {
color: #fff;
font-size: 2rem;
transform: scale(0);
transition: transform 1s ease-in-out;
}

.overlay.visible {
opacity: 1;
}

.message.visible {
transform: scale(1);
}

content {
position: absolute;
background: #000;
color: #fff;
padding-top: 20px;
text-align: center;
margin-top: 100vh;
opacity: 0;
transition: opacity 1s ease-in-out;
}

.content.visible {
opacity: 1;
}

Код: Выделить всё

Ultra Gear 

Additional Content
[img]https://gi.esmplus.com/BLADER01/Hyuk/27gs95qe/27gs95qe_01.png[/img]

Подробнее здесь: https://stackoverflow.com/questions/785 ... the-canvas