Fullscreen Image Blur Effect

Create a neat image blur effect using canvas

Create a neat image blur effect using canvas. The tutorial shows how to blur images on the transition to another one, creating a smooth effect. We will be using Stack Blur, which is a fast, almost Gaussian blur for Canvas by Mario Klingemann from Quasimondo.

The main idea is to add some images in our structure that will serve as background images. We will add the canvas element which will contain a blurred version of the image. When we navigate, we’ll add the blurred canvas behind the current image and fade the current image out. With the blurred canvas image now visible, we can either show the new image immediately (unblurred) or show it blurred and then “sharpen” it.

Daniela Vaseva

Daniela Vaseva Daniela is writing tutorials, news, newsletters, and update emails for the DMXzone specialising in the sphere of electronic processing, analysis and publication of texts, and interested in the development of new Internet technologies and problems related to the cyberculture and net literature. She has a bachelor's degree in Bulgarian philology, and a master's degree in computational linguistics.

See All Postings From Daniela Vaseva >>

Comments

How to?

November 21, 2011 by Mike Maurer

Is that the entire article? It's two lines that describe an idea or a concept, but no actual information on how to implement the idea. If there is more information out there, you might want to put a link to it, because I'm not seeing how this is helpful in anyway.

Article

November 24, 2011 by Daniela Vaseva

You can read the entire article and watch the demos at the external site which is linked below the summary.

You must me logged in to write a comment.