Hero Site Parallax Scroll

Zoom out parallax background:

.bg-image{
    height: 100vh;
    width: 100%;
    background-image: url(./bg1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 160%;
    background-attachment:fixed;
}

const bgImg = document.getElementById('bg-image');

window.addEventListener('scroll',()=>{
    updateImage();
})

function updateImage(){
    bgImg.style.opacity = 1 - window.pageYOffset/900;
    console.log(1 - window.pageYOffset/900);
    bgImg.style.backgroundSize = 160 - window.pageYOffset / 12 + ('%');
}

live site :zoomout-perallax-background-scroll

---

Fade-type parallax background:

background: url(./bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

const bgImg = document.getElementById('bg-image');

window.addEventListener('scroll',()=>{
    updateImage();
})

function updateImage(){
    bgImg.style.opacity = 1 - +window.pageYOffset/550+'';
    //  console.log(1 - +window.pageYOffset/550+'');
    bgImg.style.top = +window.pageYOffset + 'px';
    bgImg.style.backgroundPositionY = -+window.pageYOffset/2 + 'px';
}

live site :Fade-type-parallax-background-scroll