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

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

Answer 1

[tagir142]

css свойство opacity, библиотека framer-motion