Create Movable Blur Masks Using jQuery and Canvas - Blur.js

Blur.js is a jQuery plugin which makes use of jQuery UI draggable and canvas 2D api to create a movable blur mask over a given element. Similar to the background blur effect on Apple's iOS devices. Heavily based on Stack Blur algorithm.

How to use it:

1. Load jQuery library and the jQuery blur.js script in the html page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="blur.js"></script>

2. Load jQuery UI for draggable functionality.

<script src="jquery-ui.min.js"></script>

3. Create a DIV element for the blur mask.

<div class="demo"></div>

3. Call the function to generate a blur mask.

$('.demo').blurjs({
  // options here
});

4. Config the plugin.

// target element
source: 'body',

// blur Radius
radius: 5,

// Overlay Color
// rgba
overlay: '',

// offset of background-position
offset: {
  x: 0,
  y: 0
},

// additional css class
optClass: '',

// cache the blurred image in the local storage
cache: false,

// Prefix to the keyname in the localStorage object
cacheKeyPrefix: 'blurjs-',

// requries jQuery UI
draggable: false

---

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