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
- 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>
- Create Your CSS/HTML object
<div id="button" style="background:#98cb00">Click Me</div>
- Illuminate the CSS/HTML object
<script type="text/javascript">
$(document).ready(function(){
$('#button').illuminate();
});
</script>
Options
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">
$(document).ready(function(){
$('#button').illuminate({
'intensity': '0.3',
'color': '#98cb00',
'blink': 'true',
'blinkSpeed': '1200',
'outerGlow': 'true',
'outerGlowSize': '30px',
'outerGlowColor': '#98cb00'
});
});
</script>
Tips
- If the element that you are trying to apply the illumination effect on is not working, make sure that the CSS background color is set.
- If you are having problems getting the plug-in to work. Make sure you have all the necesarry javascript plug-ins added. You will need to link to the latest jQuery file and the jQuery UI file along with the illuminate file.
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
Conclusion
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