Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

图片模糊动画效果 #10

Open
gaoryrt opened this issue May 11, 2019 · 2 comments
Open

图片模糊动画效果 #10

gaoryrt opened this issue May 11, 2019 · 2 comments
Labels
effect construct of some effect

Comments

@gaoryrt
Copy link
Member

gaoryrt commented May 11, 2019

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

@gaoryrt
Copy link
Member Author

gaoryrt commented May 11, 2019

监听页面滚动就不讲了,这里他是如何实现模糊程度改变的呢?
自然我就想到 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
Copy link
Member Author

gaoryrt commented May 11, 2019

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

@gaoryrt gaoryrt added the effect construct of some effect label May 11, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
effect construct of some effect
Projects
None yet
Development

No branches or pull requests

1 participant