Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Vague.js

Vague.js: A jQuery plugin for blurring HTML elements via SVG filters.

Browser Support

Demonstration

Check the demos here on GitHub Pages and on Codepen.

Requisites

jQuery JavaScript Library

Installation

bower install vague.js --save

Usage

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

API (Public methods)

  • 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.

Issues

  • The 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 pages
  • It is not supported in the Opera browser as SVG filters over elements are not supported
  • Not supported in IE10/IE11 ( because IE still sucks )

Changelog

v0.0.6

  • merged: patch 16 - 17

v0.0.5

  • plugin code refactoring and micro optimizations
  • added: animate method

About

Vague.js is an experimental script that allows you to blur any kind of html element thanks to the SVG filters

Resources

Packages

No packages published