Create Movable Blur Masks Using jQuery and Canvas - Blur.js
File Size: | 372 KB |
---|---|
Views Total: | 3074 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.