web.bower_components.foggy.index.html Maven / Gradle / Ivy
Foggy: jQuery plugin for blurring page elements
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.
Author
Foggy has been made by nbartlomiej. Read
my blog
or
follow me on Twitter !