Foggy

Foggy is a jQuery plugin for blurring page elements.
It supports IE (8 and up), Firefox, Safari and Chrome.

Here, both paragraph text and image in the background have been blurred with Foggy.

The foggy demonstration

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis commodo massa viverra diam pharetra quis dictum mauris bibendum. In eget tortor id risus suscipit facilisis. Duis luctus tortor non sem mollis sodales. Cras et cursus justo. Phasellus vel libero erat, vel mattis justo. Aenean tempor bibendum euismod. Vivamus erat justo, lacinia vitae facilisis quis, luctus sed mauris. Suspendisse lectus dolor, accumsan eu lacinia in, dapibus vitae nunc.

Usage

Sensible defaults

 $('.your-selector').foggy();

Customization

 $('.your-selector').foggy({
   blurRadius: 2,          // In pixels.
   opacity: 0.8,           // Falls back to a filter for IE.
   cssFilterSupport: true  // Use "-webkit-filter" where available.
 });

Disabling

 $('.your-selector').foggy(false);

Download

Version 1.1.1	jquery.foggy.min.js	2014-02-27
Version 1.1	jquery.foggy.min.js	2012-09-15
Version 1.02	jquery.foggy.min.js	2012-09-03

How it works

Foggy by default uses the "-webkit-filter: blur" CSS attribute.

If the browser doesn't support it, Foggy falls back to a manual blur. It makes several copies of the selected HTML element. It adds transparency to all copies and moves each of them by small amount, thus creating the blur effect.

This is an example with forced manual mode; open it in your web inspector to see details.

The foggy demo, manual mode

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis commodo massa viverra diam pharetra quis dictum mauris bibendum. In eget tortor id risus suscipit facilisis. Duis luctus tortor non sem mollis sodales. Cras et cursus justo. Phasellus vel libero erat, vel mattis justo. Aenean tempor bibendum euismod. Vivamus erat.

Social fog

& http://github.com/nbartlomiej/foggy

Author

Foggy has been made by nbartlomiej. Read my blog or follow me on Twitter !