Coding to do this effect

I would probably approach this by creating a colour version of the image and the monochrome version – the dimensions of these would need to be identical and the monochrome one would use absolute positioning to overlay the monochrome one over the colour one.

Then use a script to adjust the opacity of the mononchrome image when the page is scrolled.

Alternatively try the examples given here as a starting point: http://stackoverflow.com/questions/21771801/adjust-css-opacity-with-elements-scroll-with-jquery

or adapt the code in the demo at: http://jsfiddle.net/SEH5M/

It should also be possible to do this with a single image – use the css filter: http://davidwalsh.name/convert-images-grayscale – and animating how the grayscale is applied instead of the opacity.