CSS background blur on scroll

Question

I have fixed background image and upon scroll I want the image to go blur. I know how to do blur in css but do it at specific scroll position.

Here is an example: https://medium.com/good-music/f160ba9e6c52

Any thoughts, examples, advice of snippets will be helpful.

Thanks

Answer 1

This codepen does exactly what you want. With browser support in mind it uses 2 images though instead of blur:

http://codepen.io/sota0805/pen/pqLcv

Answer 2

On your website example ( https://medium.com/good-music/f160ba9e6c52) there is no css "blur" effect.

You can find one normal image: https://d262ilb51hltx0.cloudfront.net/max/1440/1*THFG10B56f4TQOebO1Zd_w.jpeg

And a blurred image: https://d262ilb51hltx0.cloudfront.net/max/1440/gradv/29/81/40/darken/45/blur/20/1*THFG10B56f4TQOebO1Zd_w.jpeg

After superposing those two images, you have to change the opacity of the first one, it's done!