Question

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

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

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

Answer 1

在模糊图像时滚动

<强>演示

https://jsfiddle.net/vduucu87/

<强>代码

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

Answer 2

对于“模糊”效果，请尝试使用css filter blur(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/

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

2 个答案: