homepad.js

const homepodSection = document.querySelector('.homepod-section')

const sectionHEight = homepodSection.getBoundingClientRect().height

const html = document.documentElement

document.addEventListener('scroll', (e) => {
    let scrolled = html.scrollTop / (sectionHeight - html.clientHeight)
    console.log(`scrolled:${scrolled}`)

    homepodSection.style.setProperty('--part-1', calculateOpacity(0.05, 0.15, scrolled))
    homepodSection.style.setProperty('--part-2', calculateOpacity(0.19, 0.23, scrolled))
    homepodSection.style.setProperty('--part-3', calculateOpacity(0.35, 0.40, scrolled))
    homepodSection.style.setProperty('--part-4', calculateOpacity(0.58, 0.63, scrolled))
    homepodSection.style.setProperty('--ending', calculateOpacity(0.80, 0.85, scrolled))
})

function calculateOpacity(start, end, percent) {
    if (percent - start < 0) return 0
    if (percent - end > 0) return 1

    return (percent - start) / (end - start)
}