我正在尝试根据属性 position: absolute
和 overflow: scroll
的 div 内的滚动位置为元素设置动画。到目前为止我得到的代码是基于页面位置的位置动画,并改变不透明度。我想更改属性 filter: blur(value);
下面是现在存在的代码(不透明度,而不是基于 div 的滚动):
var header = $('div.modal-container figure.still');
var range = 200;
$(window).on('scroll', function() {
var scrollTop = $(this).scrollTop(),
height = header.outerHeight(),
offset = height / 2,
calc = 1 - (scrollTop - offset + range) / range;
header.css({
'opacity': calc
});
if (calc > '1') {
header.css({
'opacity': 1
});
} else if (calc < '0') {
header.css({
'opacity': 0
});
}
});
对我如何完成这个有什么帮助吗?
最佳答案
如果您在 calc
中有以像素为单位的可变模糊半径,请尝试如下操作:
header.css({
'filter': `blur(${calc}px)`
});
if (calc < 0) {
header.css({
'filter': 'none'
});
}
关于javascript - 基于绝对 div 内滚动位置的动画元素,溢出 : scroll,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58419519/