Элемент стилизации на js, как сделать чтобы не было резкой смены картинки фона?

Question

[Mewinal]

// Смена фона при скролле
const back = document.getElementById('back');
const pathImg_1 = "/img/back/back.avif";
const pathImg_2 = "/img/back/back_2.jpg";
const pathImg_3 = "/img/back/back.avif";

window.addEventListener('scroll', ()=>{
const windowHight = window.innerHeight;
const hight_1box = document.getElementById('main').offsetHeight;
const header = document.getElementById('header').offsetHeight;
const mainBox = document.getElementById('main');
const hight_2box = document.getElementById('scills_box').offsetHeight;
const hight_3box = document.getElementById('about').offsetHeight;
let scrollPosition = window.scrollY;

const firstShift = hight_1box - header - (header*0.2);
const secondShift = hight_1box+hight_2box+hight_3box + header;

if(firstShift<=scrollPosition){
back.style.backgroundImage = `url(${pathImg_2})`;
mainBox.style.backgroundColor = 'black';
}
if(secondShift<=scrollPosition){
back.style.backgroundImage = `url(${pathImg_3})`;
}
if(secondShift>=scrollPosition){
back.style.backgroundImage = `url(${pathImg_2})`;
}
if(firstShift>=scrollPosition){
back.style.backgroundImage = `url(${pathImg_1})`;
mainBox.style.backgroundColor = 'rgba(0, 0, 0, 0.26)';
}

})

Короче нужно чтоб блоки пролистывались и фон менялся (фон статичный), типо блок просто черный пролистался, дальше прозрачный блок и следовательно видно фон который не листается, и после черного блока должен фон меняться. Я понимаю вроде как это реализовать, но не могу сделать. Библиотеки если знаете напишите пожалуйста, ну и возможные варианты кода, буду очень благодарен.

Comments

[VoidVolker]

Mewinal https://qna.habr.com/help/rules#3.8