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
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
Image example:
Examples in action
Method list
Constructor
| Method name | new blur(id, config); |
| Description | Add 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
|
| 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
| Method name | animate(blur) |
| Description | animate 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
| Method name | toggle(animate, blur) |
| Input parameters | bool animate - true to use animation, false to blur without animation int blur - blur level applied to element |
| Description | Toggle 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
| Method name | set(blur) |
| Description | Change 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 nowYou may also be interested in:
Powered by BlogAlike.com
