Blank page

document.addEventListener('DOMContentLoaded', function () { const canvas = document.getElementById('image-sequence'); const ctx = canvas.getContext('2d'); // Получение атрибутов из HTML const basePath = canvas.dataset.sequenceBasepath; const format = canvas.dataset.sequenceLargeFormat; const totalFrames = parseInt(canvas.dataset.sequenceTotalFrames, 10); let images = []; let frame = 0; // Устанавливаем размеры canvas canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Загрузка всех изображений const loadImages = () => { return new Promise((resolve) => { let loaded = 0; for (let i = 1; i <= totalFrames; i++) { const img = new Image(); img.src = `${basePath}${i.toString().padStart(4, '0')}.${format}`; img.onload = () => { loaded++; if (loaded === totalFrames) resolve(); }; images.push(img); } }); }; // Отрисовка кадра const drawFrame = (index) => { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(images[index], 0, 0, canvas.width, canvas.height); }; // Обновление кадра при прокрутке const updateFrameOnScroll = () => { const scrollTop = window.scrollY; const maxScroll = document.body.scrollHeight - window.innerHeight; // Вычисляем индекс кадра на основе прокрутки const scrollFraction = scrollTop / maxScroll; frame = Math.min( totalFrames - 1, Math.floor(scrollFraction * totalFrames) ); drawFrame(frame); }; // Инициализация loadImages().then(() => { console.log('Все изображения загружены.'); drawFrame(0); // Отрисовать первый кадр window.addEventListener('scroll', updateFrameOnScroll); }); });