After rounded corners became a standard, and glossy is so 90’s, flat and non-skeuomorphism are the upcoming must have styles in every UI designers toolbox. But there is also another trendy UI style that came up this year. And I would say it was mainly caused by a little company out of Cuppertino and their software called iOS7. I’m talking about BLUR. For every UI interaction that causes some modal or lightbox context, blur is the new background to make the background surface look like frosted glass. Blurry effects are spreading more in the mobile app world because of the performant screen capturing methods of modern mobile operating systems. So let’s port this approach to the web and generate a dynamically blurred menu like you can see in this animation (…I know gifs are also so 90’s).
How it works
To make a blurred surface we just need an image of the current view and then process the blur effect on it. After this we set the blurred image as the background of a layer that is positioned above the page with a fixed content. That’s the theory…
Capture the screen
Add a blur effect to an image
Put one and one together
So on loading the page we will make a screenshot of the whole viewport with html2canvas. The result will be added to a hidden image tag as the source attribute as a data url. After that happens this image tag can be the argument for the blur function. StackBlur will render the blurry image to a canvas, so a canvas should be set up as the background of the hidden menu layer.
To have an animation for the menu that looks like a real dynamic blurred layer it cannot just slide in because the blurred image is already visible, and this will not look like a layer that’s opening and blurring the content beneath. We have to animate the width of the layer to make it look real:
The whole js file with preloading, opening and closing the menu looks like this: