Creating iOS Style Blur View Using jQuery And SVG Filters - bluroverlay.js

bluroverlay.js is a small jQuery plugin which makes use of CSS3 and SVG blur filter to create an iOS style blur overlay/mask covering a specific container. 

See also:

• Create iOS 7 Style Blur Effect with jQuery oblurlay Plugin
• jQuery Plugin For iOS 7 Like Semitransparent Blur View - Blear

How to use it:

1. Include the latest version of jQuery and the jQuery bluroverlay.js script on the webpage.

<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="dist/bluroverlay.min.js"></script>

2. Create a fixed header which will be blurred using this plugin.

<header id="header">
  <h1>This is Blurred Header</h1>
</header>

3. Insert the main content into a DIV container with the CSS class of 'content-wrapper'.

<div class="content-wrapper">
  ...
</div>

4. Initialize the plugin with default options.

blurOverlay = $("#header").bluroverlay();

5. You can also modify the default selector where you want to apply the blur effect.

$("#header").bluroverlay({
  contentWrapperClass: "content-wrapper"
});

6. Customize the blur effect with the following options.

$("#header").bluroverlay({
  blur: 10,
  opacity: 0.4,
  background: "#fff",
  height: "60px"
});

7. Show / hide the blur effect.

blurOverlay.showBlurmask();
blurOverlay.hideBlurmask();

---

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