• View our reviews on Hot Scripts
  • JS Tutorial

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.



Example codes

<style type="text/css">
  #line {
    width: 600px;
    height: 100px;
    background-color: red;
    font-size: 100px;
  #line2 {
    width: 100px;
    height: 600px;
    background-color: red;
    font-size: 100px;
    text-align: center;
<!-- a line from A to B -->
<div id="line">
    Some text here

<div id="line2">
<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});

Examples in action

Example scripts provided with package in action:

Method list


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

  • 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

blog comments powered by Disqus