当前位置:Gxlcms > html代码 > Medium主页类似iOS7liveblur的高斯模糊效果是如何实现的?

Medium主页类似iOS7liveblur的高斯模糊效果是如何实现的?

时间:2021-07-01 10:21:17 帮助过:44人阅读

滚动下滑之后,首页顶部图片的高斯模糊的动画效果。

Medium

回复内容:

先用 canvas,然后 fallback 到用两张图片,一张正常,一张模糊。 这里有两个Medium Scroll Effect,建议都可以参考一下:
  1. Medium Scroll Effect
  2. Medium.com style header effect
简单的做法是用CSS filter blur,只是浏览器有兼容问题,所以可以再fallback到svg/canvas/image 应该是用了某个库可以把元素的内容在canvas上绘制,并通过算法加以blur。 苹果官方有demo的 使用coreimage的滤镜或者coregraphics就可以实现

人气教程排行