search

bczFE / articles

📚 百词斩前端写文章的地方
8 stars 1 forks source link

图片模糊动画效果 #10

Open gaoryrt opened 5 years ago

gaoryrt commented 5 years ago

在 pixel3a 官网看到了这个特效，图片模糊跟着页面滚动渐变： May-11-2019 16-10-27

gaoryrt commented 5 years ago

监听页面滚动就不讲了，这里他是如何实现模糊程度改变的呢？ 自然我就想到 filter: blur 但是考虑到 filter 的兼容性： image 这里通过 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 commented 5 years ago

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