Fade text on scroll

[paulcalver]

Hi,

I have a text element fixed to a centre position on my project pages. I'd like to make this fade out as the users scrolls down the page.

http://pc2021.wpengine.com/blood-sweat-tears

I'm using this CSS code to fixed the text and adding the HTML class "_floating_text" the grider row:

._floating_text {
    position: fixed;
    width: 100%;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    z-index: -1;

}

Text works fine with this, but I've no idea how to make it fade as the user scrolls? Any ideas / help would be much appreciated.

Thanks, Paul.

[felix_rabe]

@paulcalver try some jQuery like in this example:

http://jsfiddle.net/e84enbf2/