🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Blur.js is a jQuery plugin which makes use of jQuery UI draggable and canvas 2D api to create a movable blur mask over a given element.

Blur Overlay

Documentation

Blur.js

blur.js is a jQuery plugin that produces psuedo-transparent blurred elements over other elements.

Usage

$('.target').blurjs({ 	source: 'body', 	radius: 7, 	overlay: 'rgba(255,255,255,0.4)' }); 

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

Licensing

MIT


You May Also Like