Page Elements Blurring Plugin For jQuery - foggy

foggy is a simple and fun jQuery plugin that allows you to add a blur effect to your webpage element that makes other certain elements of your page become more eye-catching. foggy is only compatible with those browsers which support the "-webkit-filter: blur" CSS attribute. For other browsers, it will fall back to a manual blur.

How to use it:

1. Include jQuery library and foggy.js on  your page

<script type='text/javascript' src='./media/jquery-1.8.1.min.js'></script>
<script type='text/javascript' src='jquery.foggy.min.js'></script>

2. Call the plugin

<script type='text/javascript'>
      $(document).ready( function(){
        $('.foggy-demo').foggy();
      });
</script>

3. Markup

<div class='foggy-demo'>
...
</div>

4. Options

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

 

---

This awesome jQuery plugin is developed by nbartlomiej. For more Advanced Usages, please check the demo page or visit the official website.