在滚动时使用css和jQuery创建模糊效果

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.

当用户使用css和jquery在浏览器窗口中上下滚动时，我试图创建模糊效果。这是我的代码。

HTML

HTML

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

CSS

CSS

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

jQuery

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.

我想要做的是增加和减少css规则背景的alpha值：当用户向上和向下滚动时使用jquery的rgba（），因此滚动会变得模糊。还是有另一种方法吗？请帮助我实现这一目标。

2 个解决方案

#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)" })     
});

#2

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

对于“模糊”效果，尝试使用css滤镜模糊（Npx），其中N是数字; px css像素单位，例如; 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="out">
    <div class="inner"></div>
</div>
<div class="this-div-kills-browsers"></div>

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

#1