Background image grayscale on scroll

Hello everybody,

I would like to have a full screen background image on the start page that is colored at the beginning and a logo in the middle.
I can do that well with the color section -> userdefined background image -> fixed.

But now I would like that when the scroll arrow down is pressed, the background image becomes greyscaled while the logo slides up out of the screen.

Surely someone already has a custom CSS in their pocket? That would make me very happy

Thank you very much and greetings
Chriss