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: 12 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>