图片模糊动画效果

[gaoryrt]

在 pixel3a 官网看到了这个特效，图片模糊跟着页面滚动渐变：

[gaoryrt]

监听页面滚动就不讲了，这里他是如何实现模糊程度改变的呢？
自然我就想到 filter: blur
但是考虑到 filter 的兼容性：

这里通过 js 直接修改 css 应该是要多写几行才行了，类似于这样：

changeBlur = (targetEl, blurPx) => {
	const val = `blur(${blurPx}px)`
	targetEl.style.filter = val
	targetEl.style["-webkit-filter"] = val
	targetEl.style["-ms-filter"] = val
	targetEl.style["-o-filter"] = val
	targetEl.style["-moz-filter"] = val
}

[gaoryrt]

但是谷歌不是这么做的，应该是兼容性考虑，他们用了六张模糊度不同的图，在滚动的时候改变透明度，来达到模糊度渐变的效果：