<!DOCTYPE html>
<!--
/*************************************************************
* This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com
* Feel free to distribute and modify code, but keep reference to its creator
*
* 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.
*
* For more information, examples and online documentation visit:
* http://webcodingeasy.com/JS-classes/Blur-effect
**************************************************************/
-->
<html>
<head>
<style>
#box
{
color: yellow;
background-color: red;
width: 180px;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<p id='simple'>Simply blurred text</p>
<p id='click'>Blur text on click <a href='#' onclick='$("#click").blurEffect("set", 10)'>Blur</a> <a href='#' onclick='$("#click").blurEffect("set", 0)'>Unblur</a></p>
<p id='hover' onmouseover='$("#hover").blurEffect("set", 10)' onmouseout='$("#hover").blurEffect("set", 0)'>Blur text on hover</p>
<p id='unblur' onmouseover='$("#unblur").blurEffect("set", 0)' onmouseout='$("#unblur").blurEffect("set", 10)'>Unblur text on hover</p>
<p id='animate'>Animate blurring on click <a href='#' onclick='$("#animate").blurEffect("animate", 10)'>Blur</a> <a href='#' onclick='$("#animate").blurEffect("animate", 0)'>Unblur</a></p>
<p id='toggle'>Toggle blurring on click <a href='#' onclick='$("#toggle").blurEffect("toggle", true, 10)'>Toggle</a></p>
<p id='move'>Bluring on mousemove</p>
<div id='box'>Some text in a box</div>
<p>Image example:</p>
<p><img id='image' src='./wce.jpg'/></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="./blur_effect.jquery.js" ></script>
<script type="text/javascript">
//simple text
$("#simple").blurEffect();
$("#box").blurEffect({box: true});
$(document).mousemove(function(e) {
var off = $("#move").offset() ;
var offset1 = Math.abs(off.top - e.pageY)-20;
var offset2 = Math.abs(off.left - e.pageX)-100;
var blur = Math.round(((offset1+offset2)/2)/10);
if(blur > 0)
{
$("#move").blurEffect("set", blur);
}
var off = $("#box").offset() ;
var offset1 = Math.abs(off.top - e.pageY)-20;
var offset2 = Math.abs(off.left - e.pageX)-100;
var blur = Math.round(((offset1+offset2)/2)/10);
if(blur > 0)
{
$("#box").blurEffect("set", blur);
}
var off = $("#image").offset() ;
var offset1 = Math.abs(off.top - e.pageY)-20;
var offset2 = Math.abs(off.left - e.pageX)-100;
var blur = Math.round(((offset1+offset2)/2)/10);
if(blur > 0)
{
$("#image").blurEffect("set", blur);
}
});
</script>
</body>
</html>
|
Download
