jQuery illuminate

Created May 30, 2011

jQuery Illuminate is a plug-in that will allow you to add an Illuminate effect on any element on your webpage, this particularly works well with buttons. Be sure to check out how to use this plug-in below. Additionally, you can check out the github repo for this project here: https://github.com/tnylea/jquery-illuminate

How to use

  1. Include all the necessary javascript files:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.illuminate.0.7.min.js"></script>
  1. Create Your CSS/HTML object
<div id="button" style="background:#98cb00">Click Me</div>
  1. Illuminate the CSS/HTML object
<script type="text/javascript">






jQuery illuminate has several options which allow you to customize the illumination effect. The options are shown below:

	'intensity': 0.05,		//Intensity of the illumination 0.00% ? 1.00%
	'color': '',				// illuminate color (default is background color)
	'blink': true, 			//illumination will pulse/blink on and off
	'blinkSpeed': 600,		// # of millisectionds to pulse/blink on and off
	'outerGlow': true,		// true or false whether to add an outer glow effect
	'outerGlowSize': '30px',	// the size of the outerGlow illuminate
	'outerGlowColor': ''		// outer glow color (default is background color)

To add any or all of these options, the code would look as follows:

<script type="text/javascript">



		'intensity': '0.3',

		'color': '#98cb00',

		'blink': 'true',

		'blinkSpeed': '1200',

		'outerGlow': 'true',

		'outerGlowSize': '30px',

		'outerGlowColor': '#98cb00'





Video tutorial

Here is a quick video tutorial, showing how to implement this plug-in: https://vimeo.com/24436212

You can find the repo for this project here: https://github.com/tnylea/jquery-illuminate


The jQuery illuminate plug-in can be freely used or modified. If you would like to share your updates and contribute to the plug-in, please visit the project on Github: You can find the repo for this project here: https://github.com/tnylea/jquery-illuminate