Question

我正在尝试根据具有属性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
      });
    }

  });

有关如何实现此目标的任何帮助？

Answer 1

如果您在calc中具有可变的模糊半径（以像素为单位），请尝试以下操作：

header.css({
  'filter': `blur(${calc}px)`
});

if (calc < 0) {
  header.css({
    'filter': 'none'
  });
}

根据具有溢出的绝对div中滚动位置的动画元素：滚动

1 个答案: