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

问题描述

我想，当用户向上和向下滚动浏览器窗口中使用CSS和jQuery创建模糊效果。这里是我的code。

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

我所试图做的是增加和减少的CSS规则的背景alpha值：用jQuery当用户上下滚动）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.

推荐答案

滚动而bluring图片

Scrolling while bluring an image

演示

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

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