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