Medium主页类似iOS7liveblur的高斯模糊效果是如何实现的?
时间:2021-07-01 10:21:17
帮助过:44人阅读
滚动下滑之后,首页顶部图片的高斯模糊的动画效果。
Medium
回复内容:
先用 canvas,然后 fallback 到用两张图片,一张正常,一张模糊。
这里有两个Medium Scroll Effect,建议都可以参考一下:
- Medium Scroll Effect
- Medium.com style header effect
简单的做法是用CSS filter blur,只是浏览器有兼容问题,所以可以再fallback到svg/canvas/image
应该是用了某个库可以把元素的内容在canvas上绘制,并通过算法加以blur。
苹果官方有demo的 使用coreimage的滤镜或者coregraphics就可以实现