Heim > Artikel > Web-Frontend > Medium 主页类似 iOS 7 live blur 的高斯模糊效果是如何实现的？

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

WBOYOriginal: 2016-06-07 08:44:321660Durchsuche

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

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

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

In Verbindung stehende Artikel

Mehr sehen