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).

A live demo of this menu inside a website template can be viewed here. The code is also available on a public repository on github.

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

This is not as easy as it sounds. There are lots of screen-capturing tools that exist especially for operating systems or even for browsers (e.g. as Firefox plugins). But not that many are able to capture the current page via JavaScript. After some searching I discovered a very nice and well maintained tool called html2canvas. This tool captures the current page into a canvas so that the dataURL function of html5 canvas can be used to process the image source code. Capture the screen and access its dataURL like this:

Add a blur effect to an image

Once again this is not as easy as it sounds. But there are some tools out there that can do a blur effect with JavaScript. For example blur.js but as far as I can see this jquery plugin “only” blurs the background image of an exitsting element. The only lean blurring js algorithm that I found was StackBlur. This tool renders an image into a html5 canvas. And it’s so easy to use:

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:

A live demo of this menu inside a website template can be viewed here. The code is also available on a public repository on github. I’m looking forward to your comments or requests for new articles.

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *