Skip to content

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

Notifications You must be signed in to change notification settings

CezaryDanielNowak/Blur.js

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Blur.js

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

It provides two blur algorithms:

  • StackBlur: slower, prettier
  • StackBoxBlur: faster, uglier

Pick the best for your needs.

Installation

Manual

  • attach jquery to your code.
  • attach dist/jquery.blur.js or dist/jquery.stack-box-blur.js

By Bower

  • bower install blurjs
  • attach dist/jquery.blur.js or dist/jquery.stack-box-blur.js

By npm

  • npm install --save blur-js
  • var blurjs = require('blur-js')(); or var blurjs = require('blur-js')('stack-box-blur');

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
	debug: false,		//put debug info in console
	useCss: true,		//Use <style>...</style> instead of inline styles. best for multiple targets
	onReady: null		//Callback triggered when image is loaded, blured and applied to dtarget.
});

Building Blur.js by Grunt

  • (sudo) npm install -g grunt-cli
  • run grunt concat

Licensing

MIT

About

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

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%