var parallaxLayers = document.getElementsByClassName("parallax-layer");

function updateParallax() {
    var widthScale = parallaxLayers[0].getBoundingClientRect().width / 3840;

    var scrollPosition = window.pageYOffset;
    var initialScroll = 0;
    var layerIncrement = -0.09;

    for(var i = 0; i < parallaxLayers.length; i++) {
        var parentPos = parallaxLayers[i].parentElement.offsetTop;
        parallaxLayers[i].style.backgroundPositionY = `${(scrollPosition - parentPos) * (initialScroll + i*layerIncrement * widthScale) + i * 500 * widthScale + parentPos}px`;
    }
}
window.addEventListener("resize", (event) => {
    updateParallax();
});
window.addEventListener('scroll', (event) => {
    updateParallax();
});

updateParallax(); //Initial update on load