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

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

WBOY
Freigeben: 2016-06-07 08:44:32
Original
1709 Leute haben es durchsucht

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

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就可以实现
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage