Blur.js

blur.js is a jQuery plugin that produces psuedo-transparent blurred elements over other elements.

It provides two blur algorithms:

• StackBlur: slower, prettier
• StackBoxBlur: faster, uglier

Pick the best for your needs.

Installation

Manual

• attach jquery to your code.
• attach dist/jquery.blur.js or dist/jquery.stack-box-blur.js

By Bower

• bower install blurjs
• attach dist/jquery.blur.js or dist/jquery.stack-box-blur.js

By npm

• npm install --save blur-js
• var blurjs = require('blur-js')(); or var blurjs = require('blur-js')('stack-box-blur');

Usage

$('.target').blurjs({
    source: 'body',
    radius: 7,
    overlay: 'rgba(255,255,255,0.4)'
});

Defaults

$('.target').blurjs({
    source: 'body',     //Background to blur
    radius: 5,      //Blur Radius
    overlay: '',        //Overlay Color, follow CSS3's rgba() syntax
    offset: {       //Pixel offset of background-position
        x: 0,
        y: 0
    },
    optClass: '',       //Class to add to all affected elements
    cache: false,       //If set to true, blurred image will be cached and used in the future. If image is in cache already, it will be used.
    cacheKeyPrefix: 'blurjs-',  //Prefix to the keyname in the localStorage object
    draggable: false,   //Only used if jQuery UI is present. Will change background-position to fixed
    debug: false,       //put debug info in console
    useCss: true,       //Use <style>...</style> instead of inline styles. best for multiple targets
    onReady: null       //Callback triggered when image is loaded, blured and applied to dtarget.
});

Building Blur.js by Grunt

• (sudo) npm install -g grunt-cli
• run grunt concat

Licensing

MIT