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

Javascript glint effect

Glint effect class is a standalone package or jquery plugin, that provides a way to add glint effect to HTML elements. It appends canvas to provided HTML element and generates glint effect based on provided configuration

Note: To make it work in IE9, you should use HMTL 5 Doctype. Simply put "<!DOCTYPE html>" in the beginning in your file

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

Contents

Download

Back to contents

Example codes

Back to contents

<html>
<head>
</head>
<body>
<style type="text/css">
  #line {
    position:relative;
    width: 600px;
    left:50px; 
    top:40px;
    height: 100px;
    background-color: red;
    font-size: 100px;
  }
  #line2 {
    position:relative;
    width: 100px;
    left:50px; 
    top:40px;
    height: 600px;
    background-color: red;
    font-size: 100px;
    text-align: center;
  }
</style>
<!-- a line from A to B -->
<div id="line">
    Some text here
</div>

<div id="line2">
S<br/>o<br/>m<br/>e<br/>
</div>
<script type="text/javascript" src="./glint.packed.js" ></script>
<script type="text/javascript">

var g1 = new glint("line");
var g2 = new glint("line2", {horizontal: false, angle: 135});
</script>
</body>
</html>

Examples in action

Back to contents

Example scripts provided with package in action:

Method list

Back to contents

Constructor

Back to method list

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

string id - id of element where to add glint effect

json config - Json structure with configuration properties

  • int speed - by how much pixels should glint move in each iteration (default: 3)
  • int interval - time in miliseconds for each glint movement iteration (default: 10)
  • int pause - pause after one glint and before another one (default: 1000)
  • int size - size of glint (width or height) in pixels (default: 100)
  • int r - value for red channel from 0 to 255 (default: 255)
  • int g - value for green channel from 0 to 255 (default: 255)
  • int b - value for blue channel from 0 to 255 (default: 255)
  • int angle - angle of glint, value from 0 to 180, where 90 is perpendicular (default: 45)
  • int density - density of glint or maximal value for alpha channel from 0 to 255 (default: 255)
  • bool horizontal - if glint should be generated and moved horizontally (default: true)
  • bool forward - if glint should be moved from left to right for horizontal and from top to bottom in vertical (default: true)
  • function onerror - callback function if browser doesn't support canvas (default: null)
Example input
var g = new glint_effect("glint", 
{
	//how many pixels per interval to move
	speed: 3,
	//how often to move glint
	interval: 10,
	//pause after glint before another one
	pause: 1000,
	//size of glint
	size: 100,
	//red channel
	r: 255,
	//green channel
	g: 255,
	//blue channel
	b: 255,
	//angle of glint
	angle: 45,
	//density/maximal alpha channel
	density: 255,
	//horizontal or vertical
	horizontal: true,
	//from left to right or backward
	forward: true,
	//on error callback
	onerror: function(){"Your browser doesn't support canvas"}
});

Latest changes

Back to contents

  • 21. September, 2011 - Added on error callback support
  • 22. September, 2011 - Fixed density bug, optimized, Jquery plugin added


You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus