I'm attempting to achieve a unique effect with the background image, where its opacity reduces on scroll to a minimum of 0.5 once it goes past the landing page. I've been using vanilla JavaScript for this purpose. I initially tried incorporating Math.max() within the scroll function to ensure the image only drops to 0.5, but encountered an issue where the image remained at 0.5 for all pages.
My goal is to have the landing page always display at full opacity (1), while all other pages should have an opacity of 0.5. Although I was successful in creating the scrolling animation, I need assistance in stopping the opacity change at 0.5.
const landingHeight = document.getElementById("section-landing").offsetHeight;
window.onscroll = function() {
const opcFilter = (window.pageYOffset/ landingHeight);
document.body.style.background = "linear-gradient(rgba(255, 255, 255, " + opcFilter + "), rgba(255, 255, 255, " + opcFilter + ")), url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg) no-repeat";
}