首頁 >web前端 >H5教程 >Medium 主页类似 iOS 7 live blur 的高斯模糊效果是如何实现的?

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

WBOY
WBOY原創
2016-06-07 08:44:321704瀏覽

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

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就可以实现
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn