Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Blur effect

Blur effect class provides a blur effect on HTML elements. It is possible to blur text, surrounding box or both. It is also possible to blur images using SVG filters. Thus this might not work in all Safari versions

This class ir provided as a standalone package or jquery plugin

Package contains blur_effect.js, blur_effect.packed.js (packed javascript), blur_effect.jquery.js (jquery plugin), and four example files: simple_example.html, example.html, captcha_example.html and jquery_example.html to demonstrate class functionality.

Contents

Download

Example codes

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id='blured'>
Some text that will be blurred
</div>
<script type="text/javascript" src="./blur_effect.packed.js" ></script>
<script type="text/javascript">
var bl = new blur("blured");
</script>
</body>
</html>

Live Examples

Simply blurred text

Blur text on click Blur Unblur

Blur text on hover

Unblur text on hover

Animate blurring on click Blur Unblur

Toggle blurring on click Toggle

Bluring on mousemove

Some text in a box

Image example:

Examples in action

Example scripts provided with package in action:

Method list

Constructor

Back to method list

Method namenew blur(id, config);
DescriptionAdd blur effect HTML object
Input parameters

string or HTML element id - id of element or HTML element itself, where to add blur effect effect

json config - Json structure with configuration properties

  • int blur - blur level you want to apply to element, in reality it is a radius in pixels of blurring effect for one pixel (default: 3)
  • int interval - speed of animation (miliseconds for each step) (default: 10)
  • bool text - apply blur effect to text (default: 'true')
  • bool box - apply blur effect to element itself (default: 'false')
Example input
var w = new blur("somelement", 
{
	//how much blur do you want
	blur: 3,
	//speed of animation
	interval: 10,
	//blur text
	text: true,
	//blur surrounding box (element itself)
	box: false
});
Jquery example
$("somelement").blurEffect( 
{
	//how much blur do you want
	blur: 3,
	//speed of animation
	interval: 10,
	//blur text
	text: true,
	//blur surrounding box (element itself)
	box: false
});

Animate blur effect

Back to method list

Method nameanimate(blur)
Descriptionanimate current element up to provided blur value
Input parameters

int blur - blur level applied to element

Example

b.animate(10)

Jquery Example

$("somelement").blurEffect("animate", 10)

Toggle blur effect

Back to method list

Method nametoggle(animate, blur)
Input parameters

bool animate - true to use animation, false to blur without animation

int blur - blur level applied to element

DescriptionToggle current element with or without animation up to provided blur value
Example

b.toggle(true, 10)

Jquery Example

$("somelement").blurEffect("toggle", true, 10)

Change level of blur effect

Back to method list

Method nameset(blur)
DescriptionChange blur level from initial to provided
Input parameters

int blur - blur level applied to element

Example

b.set(0)

Jquery Example

$("somelement").blurEffect("set", 10)

Latest changes

None for now

You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus