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/