CSS & JS Effect for hero sector bg image

[EfiGelfi]

What would you like to share?

I have a verbal explanation and a video because it's hard to explain
The object here is the bg image of the hero sector (code lines).

When the page loads, the top 200~ pixels of the image should be visible with full opacity (100%).
The remaining portion of the image should be gradually hidden (opacity: 0).
As the user scrolls down the page, the hidden section of the image should gradually reveal itself, starting from the top.
The opacity of this hidden area should smoothly increase as the user scrolls further down, until the entire image reaches 100% opacity and becomes fully visible.
Even after the image is completely revealed, it should remain visible with full opacity as the user continues scrolling past the "hero-section".

Please feel free to choose however you want to develop this effect.

Gemini offered this:

1. JavaScript ו-CSS:

Scroll Event Listener: השתמש ב-JavaScript כדי להאזין לאירועים של גלילה (scroll events).
חשב את המיקום הנוכחי: בכל אירוע גלילה, חשב את המיקום הנוכחי של גלילת הדף (scroll position) ביחס לתמונה.
התאם את ה-OPACITY: על סמך המיקום הנוכחי, השתמש ב-CSS כדי להתאים את ה-OPACITY של התמונה באופן חלק. ניתן להשתמש בפונקציות CSS כמו transform: translateY() ו-opacity: כדי להשיג אפקט גלילה חלקה.
דוגמה:
CSS
#my-image {
height: 800px;
opacity: 0; /* התחל עם OPACITY 0 */
}

#my-image.in-view {
opacity: 1; /* OPACITY מלא כשהתמונה נראית במלואה */
}

#my-section-2 {
margin-top: 800px; /* מרווח למעלה שווה לגובה התמונה */
}

#my-image {
transition: opacity 0.5s ease; /* הגדר מעבר חלק של OPACITY */
}

window.addEventListener('scroll', function() {
const image = document.getElementById('my-image');
const section2 = document.getElementById('my-section-2');
const scrollTop = window.pageYOffset;
const imageTop = image.getBoundingClientRect().top;
const section2Top = section2.getBoundingClientRect().top;

if (scrollTop >= imageTop && scrollTop < section2Top) {
const opacity = 1 - (scrollTop - imageTop) / (section2Top - imageTop);
image.style.opacity = opacity;
} else if (scrollTop >= section2Top) {
image.classList.add('in-view');
} else {
image.style.opacity = 0;
image.classList.remove('in-view');
}
});

I can send a video to whoever is working on this issue. It was too big to upload to here.
Feel free to DM me.

Additional information

No response