使用css和jQuery在滚动上创建模糊效果 [英] Creating blur effect with css and jQuery on scroll

问题描述

我试图创建模糊效果，当用户使用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.

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\'));
});

演示fiddle

demo fiddle

我想要做的是增加和减少css规则背景的alpha值：rgba向上和向下滚动，所以它会变得模糊与滚动。还是有另一种方式这样做？请帮助我实现这一点。

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.

推荐答案

在模糊图像时滚动

演示

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

这篇关于使用css和jQuery在滚动上创建模糊效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！