Home > Article > Web Front-end > Medium 主页类似 iOS 7 live blur 的高斯模糊效果是如何实现的？

Medium 主页类似 iOS 7 live blur 的高斯模糊效果是如何实现的？

WBOYOriginal: 2016-06-07 08:44:321661browse

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

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就可以实现

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：微信5.0打飞机游戏是web app吗？Next article：如果用html5来取代移动端的app，其所面临的问题有哪些？

See more

Medium 主页类似 iOS 7 live blur 的高斯模糊效果是如何实现的？

回复内容：

Related articles