Javascript library for blurring HTML content with CSS and SVG
$(selector).blurjs({
customClass: 'blurjs',
radius: 5,
persist: false
});
jQuery is required, and so is a modern browser. This is nothing more than a wrapper for CSS making it easy to work with, the CSS itself will be at the bottom of this post.
customClass: uses this class for some of the inner workings of the script.radius: The blur radius you want to use (int)persist: Boolean, removes previously blurred elements.
The option persist is used to fix the following scenario. Instead of blurring, imagine youÕre changing the opacity. If the body element has an opacity of 50%, all of its children are at 50% opacity as well. If you were then to apply 50% opacity to a child element, its opacity would actually end up being 25% of the initial value because its parent is opaque as well.
Ex. You blur the body element. Then you blur a child element, making the child extremely blurry. If persist is set to false, when you blur the child element, the body will become unblurred to allow you to have further control of how the script blurs elements.
$.blurjs('reset');