Vague.js is an experimental script that allows you to blur any kind of html element thanks to the SVG filters
Vague.js: A jQuery plugin for blurring HTML elements via SVG filters.
Check the demos here on GitHub Pages and on Codepen.
jQuery JavaScript Library
bower install vague.js --save
var vague = $('#yourelement').Vague({
intensity: 3, // Blur Intensity
forceSVGUrl: false, // Force absolute path to the SVG filter,
// default animation options
animationOptions: {
duration: 1000,
easing: 'linear' // here you can use also custom jQuery easing functions
}
});
vague.blur();
blur
: Apply the SVG filter to the element selected.unblur
: Hide the SVG filter from the element selected.animate( newBlurIntensity, animationOptions )
: Animate the blur intensity to any new value.
vague.animate(
20,
// here you can use the normal jQuery animation options
{
duration:500,
easing: 'linear'
}
).done(function(){
console.log('Animation finished!');
});
destroy
: remove the blur effect and the SVG filter from the DOM.animate
method is part of the plugin but it's not recommended, it can be really slow due to the many GPU resources needed to render the blur effect on the pagesanimate
method