Creating blur effect with css and jQuery on scroll

Question

I am trying to create blur effect when the user scrolls up and down the browser window using css and jquery. Here is my code.

HTML

&         


        

Answer 1

For "blur" effect , try utilizing css filter blur(Npx) , where N is a number; px css pixel units e.g.; 4px

var hideThatKitty = $('.out').innerHeight();

$(window).on('scroll', function () {
    hideThatKitty = hideThatKitty / $('.this-div-kills-browsers').offset().top
    $('.out')
    .css({"webkit-filter": "blur(4px)",
          "moz-filter":"blur(4px)",
         "ms-filter":"blur(4px)",
         "o-filter":"blur(4px)",
         "filter":"blur(4px)"});
});

.out {
    width: 100%;
    height: 800px;
    background: url(https://placekitten.com/1200/800) no-repeat;
}
.this-div-kills-browsers {
    height: 1000px;
}

jsfiddle https://jsfiddle.net/2dmxLnuy/5/