recherche

Maison >interface Web >Tutoriel H5 >Medium 主页类似 iOS 7 live blur 的高斯模糊效果是如何实现的？

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBoriginal
2016-06-07 08:44:321722parcourir

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

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就可以实现
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：微信5.0打飞机游戏是web app吗？Article suivant：如果用html5来取代移动端的app，其所面临的问题有哪些？

Articles Liés

Voir plus