Dégradé JS sans images PNG

Bonjour tout le monde, voici mon problème, je sais me débrouiller en HTML/CSS, mais en JS, je n'y connais rien, et j'ai besoin de votre aide :D

Ce que j'essaie d'obtenir, c'est un dégradé appliqué à un texte, lorsqu'on scroll une page vers le bas, le texte qui part vers le haut change petit à petit de couleur, par exemple un texte de couleur blanc sur un fond noir, avec une image fixé en haut de page au premier plan, plus on descend en bas de la page, on obtient une sorte de transition, sans que l'on ne s'aperçoit que le texte part en fait derrière l'image, car la couleur du texte aura changer lentement vers le noir (donc devenu invisible car le background est noir).

Ce que je voudrais impérativement, c'est pas juste de faire le dégradé sur le texte , mais de faire que quand le texte bouge, le dégradé reste au même endroit de la page et se déplace sur le texte.

Je préfère éviter l'utilisation de la transparence avec les images PNG, car le texte devient inaccessible à partir du moment où celui-ci est derrière la partie transparente de l'image, donc c'est mort pour l'utilisation de liens URL ou autre...

Merci de votre aide !!!