Эффект параллакса и задержка с помощью Canvas — изображения, загруженные с помощью JavaScript ⇐ Javascript

[Гость]

С помощью Canvas я работаю над эффектом параллакса с изображениями, загруженными в файл main.js. Параллакс работает нормально Черновой вариант кода находится здесь: https://github.com/bengabo/parallax-image. Моя проблема в том, что я хочу задержать отображение изображения «layer_9_1.png», но когда я пишу задержку, она применяется ко всем изображениям. Пробовал с функцией, условием... Но ничего не получается. Каждый раз это применяется ко всем изображениям.
Интерактивная иллюстрация параллакса Загрузка... тело { размер коробки: граница-коробка; маржа: 0; высота: 100%; цвет фона: #ffffff; дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; семейство шрифтов: «Segoe UI», Tahoma, Женева, Вердана, без засечек; } .image-контейнер { дисплей: гибкий; высота: 100%; ширина: 100%; максимальная ширина: 100%; положение: относительное; } .холст { ширина: авто; максимальная ширина: 100%; максимальная высота: 100%; дисплей: блок; маржа: авто; цвет фона: RGB(255, 255, 255); } .загрузочный экран { позиция: абсолютная; ширина: 100%; высота: 100%; фон: белый; верх: 0; внизу: 0; слева: 0; правильно: 0; видимость: видимая; непрозрачность: 1; выравнивание текста: по центру; дисплей: гибкий; гибкое направление: столбец; выровнять-элементы: по центру; оправдание-содержание: центр; высота строки: 40 пикселей; переход: 0,25 с, облегчить все 0,75 с; цвет: #999; трансформировать: TranslateZ(50px); } .loading-screen.hidden { видимость: скрыта; непрозрачность: 0; } let ctx = Canvas.getContext("2d"); // Экран загрузки let loading_screen = document.getElementById("загрузка"); /** * Загрузчик изображений */ пусть загружен = ложь; пусть load_counter = 0; пусть фон = новое изображение(); пусть stars_01 = новое изображение(); пусть stars_02 = новое изображение(); пусть stars_03 = новое изображение(); пусть тени = новое изображение(); пусть маска = новое изображение(); пусть планеты = новое изображение(); пусть stars_04 = новое изображение(); пусть заголовок = новое изображение(); пусть Layer_list = [ { изображение: фон, источник: "/layer_1_1.png", z_index: -2, позиция: {x: 0, y: 0}, смесь: ноль, непрозрачность: 1, МаксСмещениеX: 100, МаксСмещениеY: 100, задержка: 0, }, { изображение: звезды_01, источник: "/layer_2_1.png", z_index: -1,8, позиция: {x: 0, y: 0}, смесь: ноль, непрозрачность: 1, задержка: 0, }, { изображение: звезды_02, источник: "/layer_3_1.png", z_index: -1,5, позиция: {x: 0, y: 0}, смесь: «наложение», непрозрачность: 0,7, задержка: 0, }, { изображение: stars_03, источник: "/layer_4_1.png", z_index: -1,25, позиция: {x: 0, y: 0}, смесь: «наложение», непрозрачность: 0,8, задержка: 0, }, { изображение: тени, источник: "/layer_5_1.png", z_index: -0,75, позиция: {x: 0, y: 0}, смесь: «умножить», непрозрачность: 1, МаксСмещениеX: 100, МаксСмещениеY: 100, задержка: 0, }, { изображение: маска, источник: "/layer_6_1.png", z_индекс: 0, позиция: {x: 0, y: 0}, смесь: ноль, непрозрачность: 1, задержка: 0, }, { изображение: планеты, источник: "/layer_7_1.png", z_index: 0,25, позиция: {x: 0, y: 0}, смесь: ноль, непрозрачность: 1, задержка: 0, }, { изображение: звезды_04, источник: "/layer_8_1.png", z_index: 1,25, позиция: {x: 0, y: 0}, смесь: ноль, непрозрачность: 0,8, МаксСмещениеX: 100, МаксСмещениеY: 100, задержка: 0, }, { изображение: заголовок, источник: "/layer_9_1.png", z_index: 1,5, позиция: { x: Canvas.width, y: 0 }, смесь: ноль, непрозрачность: 1, МаксСмещениеX: 120, МаксСмещениеY: 100, задержка: 2000, }, ]; const скрытьLoading = () => { loading_screen.classList.add("скрыт"); }; Layers_list.forEach((слой, индекс) => { Layer.image.onload = () => { load_counter += 1; if (load_counter >= Layer_list.length) { скрытьЗагрузка(); requestAnimationFrame (drawCanvas); } }; Layer.image.src = Layer.src; }); let getOffset = (слой) => { пусть touch_multip = 0,1; пусть touch_offset_x = pointer.x * Layer.z_index * touch_multip; пусть touch_offset_y = pointer.y * Layer.z_index * touch_multip; // Ограничиваем движение на основе maxOffsetX и maxOffsetY если (touch_offset_x > Layer.maxOffsetX) { touch_offset_x = Layer.maxOffsetX; } если (touch_offset_x Layer.maxOffsetY) { touch_offset_y = Layer.maxOffsetY; } если (touch_offset_y { ctx.clearRect(0, 0, холст.ширина, холст.высота); // const Rotate_x = pointer.y * 0,15 + motion.y * 1,2; // const Rotate_y = pointer.x * 0,15 + motion.x * 1,2; // константа Transform_string = // "rotateX(" + Rotate_x + "deg), RotateY(" + Rotate_y + "deg)"; // холст.стиль.transform = Transform_string; Layers_list.forEach((слой, индекс) => { Layer.position = getOffset(слой); // Режимы наложения слой.смесь ? (ctx.globalCompositeOperation = Layer.blend) : (ctx.globalCompositeOperation = "нормальный"); // Непрозрачность ctx.globalAlpha = Layer.opacity; ctx.drawImage(layer.image, Layer.position.x, Layer.position.y); }); requestAnimationFrame (drawCanvas); }; /** * Управление мышью */ пусть перемещение = ложь; пусть pointer_init = { х: 0, й: 0, }; пусть указатель = { х: 0, й: 0, }; const pointerStart = (событие) => { перемещение = правда; if (event.type === "touchstart") { pointer_init.x = event.touches[0].clientX; pointer_init.y = event.touches[0].clientY; } else if (event.type === "mousedown") { pointer_init.x = event.clientX; pointer_init.y = event.clientY; } }; Canvas.addEventListener("touchstart", pointerStart); Canvas.addEventListener("mousedown", pointerStart); const pointerMmove = (событие) => { событие.preventDefault(); если (перемещение === true) { пусть current_x = 0; пусть current_y = 0; if (event.type === "touchemove") { current_x = event.touches[0].clientX; current_y = event.touches[0].clientY; } else if (event.type === "mousemove") { current_x = event.clientX; current_y = event.clientY; } указатель.x = текущий_x - указатель_init.x; указатель.y = текущий_y - указатель_init.y; } }; window.addEventListener("touchmove", pointerMmove); window.addEventListener("mousemove", pointerMmove); Canvas.addEventListener("touchmove", (event) => { событие.preventDefault(); }); Canvas.addEventListener("mousemove", (event) => { событие.preventDefault(); }); window.addEventListener("touchend", (event) => { КонецЖест(); }); window.addEventListener("mouseup", (event) => { КонецЖест(); }); const endGesture = () => { перемещение = ложь; указатель.х = 0; указатель.у = 0; };