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

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

WBOY
Release: 2016-06-07 08:44:32
Original
1709 people have browsed it

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

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就可以实现
Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template