iOS7 Frosted Glass Effect with HTML 5 and Javascript

With iOS7 Apple introduced a completely new design for the 6 year old OS. Among all the changes, one that really caught everyone's attention was the blurred background effect. Basically some parts of the UI get a nice frosted glass effect. There are a couple of ways to achieve this effect using HTML and CSS. The easiest way is to use CSS filters, however the performance on phones is far from usable. With that in mind I decided to experiment with Canvas and the result was quite good.

So in this post I want to share a little bit about the idea behind this prototype.

Basic workflow

What we want to accomplish here is a simple way to blur the content once it goes underneath a part of the UI. For this prototype we will use an action bar, or header. To do that in HTML we will have to use a little bit of Javascript. Basically what we want to do is:

1. Render the HTML
2. Duplicate the content area and convert it to canvas.
3. Move the Canvas to the Header part
4. Sync the scroll of the content with the canvas in the header

Basic code

See the Pen eJlfj by Fabio Sasso (@abduzeedo) on CodePen

Javascript

To convert the content area from HTML to Canvas I used a library called html2canvas (http://html2canvas.hertzen.com/). It's pretty simple to use if you follow the steps in the documentation:

html2canvas(element, { onrendered: function(canvas) { // canvas is the final rendered <canvas> element } });

After the Canvas is rendered I then move it to the Header. I also added an ID so I can play with it in CSS and apply the blur effect in the future.

html2canvas($("body"), { onrendered: function(canvas) { $(".blurheader").append(canvas); $("canvas").attr("id","canvas"); } });

Blur Effect

To apply the blur, I used another library for that, it's called Stackblur and it applies Gaussian Blur to a canvas element.

html2canvas($("body"), { onrendered: function(canvas) { $(".blurheader").append(canvas); $("canvas").attr("id","canvas"); stackBlurCanvasRGB('canvas', 0, 0, $("canvas").width(), $("canvas").height(), 20); } });

Conclusion

The end result works pretty well for a simple iOS7 prototype. I am still working on fixing the issues with the scrolling, iOS doesn't have "on scroll event" which complicates things a little bit.

Below you can see a demo of the prototype. You can fork it on GitHub (https://github.com/abduzeedo/ios7-blur-html5) and make it better :)