File: example.html

Recommend this page to a friend!
  Classes of Arturs Sosins  >  Blur effect  >  example.html  >  Download  
File: example.html
Role: Example script
Content type: text/plain
Description: Different examples on using object
Class: Blur effect
Apply the blur effect to HTML page elements
Author: By
Last change:
Date: 10 years ago
Size: 3,230 bytes
 

Contents

Class file image Download
<!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='cl.set(10)'>Blur</a> <a href='#' onclick='cl.set(0)'>Unblur</a></p>
<p id='hover' onmouseover='hover.set(10)' onmouseout='hover.set(0)'>Blur text on hover</p>
<p id='unblur' onmouseover='unblur.set(0)' onmouseout='unblur.set(10)'>Unblur text on hover</p>
<p id='animate'>Animate blurring on click <a href='#' onclick='anim.animate(10)'>Blur</a> <a href='#' onclick='anim.animate(0)'>Unblur</a></p>
<p id='toggle'>Toggle blurring on click <a href='#' onclick='tog.toggle(true)'>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 type="text/javascript" src="./blur_effect.packed.js" ></script>
<script type="text/javascript">

//simple text
var b = new blur("simple");
//blur on click
var cl = new blur("click", {blur: 0});
//blur on hover
var hover = new blur("hover", {blur: 0});
//unblur on hover
var unblur = new blur("unblur", {blur: 10});
//animated blur
var anim = new blur("animate", {blur: 0, interval: 50});
//toggle blur
var tog = new blur("toggle", {blur: 10, interval: 50});
tog.toggle();
//blur on mousemove
var elem = document.getElementById("move");
var elem_pos = elem.getBoundingClientRect();
var move = new blur(elem, {blur: 0});
//blur box
var boxel = document.getElementById("box");
var box_pos = boxel.getBoundingClientRect();
var box = new blur(boxel, {box: true});
//blur image
var imgel = document.getElementById("image");
var img_pos = imgel.getBoundingClientRect();
var img = new blur(imgel);
//adding to mouse move event
document.onmousemove = function(e){
	//calculate text blur
	var offset1 = Math.abs(elem_pos.top - e.pageY)-20;
	var offset2 = Math.abs(elem_pos.left - e.pageX)-100;
	var blur = Math.round(((offset1+offset2)/2)/10);
	if(blur > 0)
	{
		move.set(blur);
	}
	
	//calculate box blur
	var offset1 = Math.abs(box_pos.top - e.pageY)-20;
	var offset2 = Math.abs(box_pos.left - e.pageX)-100;
	var blur = Math.round(((offset1+offset2)/2)/10);
	if(blur > 0)
	{
		box.set(blur);
	}
	
	//calculate image blur
	var offset1 = Math.abs(img_pos.top - e.pageY)-20;
	var offset2 = Math.abs(img_pos.left - e.pageX)-100;
	var blur = Math.round(((offset1+offset2)/2)/10);
	if(blur > 0)
	{
		img.set(blur);
	}
}
</script>
</body>
</html>