Page Elements Blurring Plugin For jQuery - foggy

File Size: 43.5 KB
Views Total: 1693
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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(){

3. Markup

<div class='foggy-demo'>

4. Options

   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.