assombrir une image en scrollant

Bonjour, je suis en train de faire une page web et j’ai mis une image en grand. J’aimerais que cette image s’assombrisse au fur et a mesure qu’on scroll jusqu’à devenir noir. Le problème c’est que j’ai chercher partout un moyen de faire sur internet mais je trouve pas. J’espère donc avoir de l’aide ici. Bonne journée

Tu as déjà une expérience de développement Web ?

Sans framework, ça se fait avec l'évènement scroll et l’application d’un filtre CSS agissant sur la luminance de l’image. Si tu as un framework spécifique ça peut être encore plus simple. Bloques-tu quelques part ? Si oui, où ?

Salut! Merci beaucoup pour ta réponse! Alors oui j’ai déjà une expérience avec le développement web mais je suis encore débutante et j’ai beaucoup a apprendre. Je n’ai pas de Framework.

J’utilise déjà l’évènement scroll pour mon image est ce que je continue a la suite ? Est ce que ca ressemble a quelque chose comme ça ?

window.addEventListener(’scroll’, scrollEffect);

function scrollEffect() {
    if(window.scrollY>=800) {
        EFFECT.style.oppacity = '1'; 
        EFFECT.style.transform = 'translateX(0px)';
        EFFECT.style.transition = '1s ease-in-out';
        EFFECT.style.transform = 'brightness(50%)';

    }
    else {
        EFFECT.style.oppacity = '0'; 
        EFFECT.style.transform = 'translatex(-50px)';

    }
}

}

Merci encore !