On the Medium homepage, how is the Gaussian blur effect similar to iOS7liveblur achieved? -

After scrolling down, the animation effect of Gaussian blur on the top of the homepage is displayed. After the Medium scroll drops, the animation effect of Gaussian blur on the top of the home page is displayed.

Medium

Reply content: first use canvas, and then fallback to use two images. One is normal and the other is blurred. There are two Medium Scroll Effect values. We recommend that you refer to them as follows:

1. Medium Scroll Effect
2. Medium.com style header effect

The simple method is to use CSS filter blur, but the browser has compatibility problems, therefore, you can use fallback to draw element content on the canvas and perform blur using algorithms. You can use the coreimage filter or coregraphics for the demo officially available by Apple.