alt="Your hero image description"
class="hero-image"
id="heroImage"
/>
Welcome Message
Brief description here.
const heroImage = document.getElementById('heroImage');
const fadeOverlay = document.getElementById('fadeOverlay');
function handleScroll() {
const scrollPosition = window.scrollY;
const fadeOpacity = Math.max(0, 1 - scrollPosition / 300); // Adjust 300 for fade speed
if (heroImage) heroImage.style.opacity = fadeOpacity;
if (fadeOverlay) fadeOverlay.style.opacity = 1 - fadeOpacity;
}
window.addEventListener('scroll', handleScroll);
handleScroll(); // Initial call