当用户使用 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\'));
});
演示小提琴
我想做的是当用户上下滚动时用jquery增加和减少css规则background:rgba()的alpha值,所以它会随着滚动而变得模糊。或者还有其他方法可以做到这一点吗?请帮助我实现这一目标。
滚动同时模糊图像
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)" })
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)