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

<div class="out">
    <div class="inner"></div>
</div>
<div class="this-div-kills-browsers">
</div>

CSS

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

jQuery

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

$(window).on('scroll', function () {
     hideThatKitty = hideThatKitty/$('.this-div-kills-browsers').offset().top    
    $('.inner').css('background', rgba(255, 255, 255, \''0'+hideThatKitty\'));
});

demo fiddle

What i am trying to do is increasing and decreasing the alpha value of css rule background:rgba() with jquery when the user scroll up and down, So it will get blurred with scrolling. Or is there another way of doing this? Please help me to achieve this.

Answer 1

Scrolling while bluring an image

Demo

https://jsfiddle.net/vduucu87/

Code

$(window).on('scroll', function () {
    var pixs = $(document).scrollTop()
    pixs = pixs / 100;
    $(".out").css({"-webkit-filter": "blur("+pixs+"px)","filter": "blur("+pixs+"px)" })     
});