Fork me on GitHub
blur.js

Attention!

There may be a fun candidate for a V2 for Blur.js, view the blog post here

Note: The two versions are different in their nature.

What?

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

Code Sample

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

Examples

Why?

Why the hell not?

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 });

Demos

Blur Radius

$('.target').blurjs({ source: 'body', radius: 10 });

Overlay

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

Overlay 2

$('.target').blurjs({ source: 'body', overlay: 'rgba(0,100,100,0.1)' });

Offset (source bg attachment must be scroll)

$('.target').blurjs({ source: 'body', offset: { x: 15, y: -12 }, });

Caching (view console)

$('.target').blurjs({ source: 'body', cache: true, debug: true });

Draggable (source bg attachment must be fixed)

$('.target').blurjs({ draggable: true, overlay: 'rgba(255,255,255,0.4)' });

Changing Source

$('.target').blurjs({ source: '#wideContainer',//This specific "panels'" parent overlay: 'rgba(255,255,255,0.3)' });

Download

Formalities/Issues

  				
- Canvas Support Required (server side fallback in the future?)
- Script works best when the source's background-position is set to "top left"
Offset parameter can be used if background is positioned differently

Changelog

* 1.27.2011: Version 0.1 Released

Credits

  				
- Stack Blur Algorithm and implementation: http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
- Backgrounds 1 & 2: http://pattern8.com/