Text "glow" effect jQuery

badboyxlr · 21-03-2011, 06:55 PM

Ok, so for this tutorial you will need these 3 scripts (just past the code below into your html file).

HTML Code:

<script type="text/javascript" src="http://www.aidantaylor.net/javascript/jquery-1.5.js"></script> 
<script type="text/javascript" src="http://www.aidantaylor.net/javascript/glow.js"></script> 
<script type="text/javascript" src="http://www.aidantaylor.net/javascript/jquery.color.js"></script>

They will give us the base for the jQuery we are going to use.
The next step is the jQuery whitch will alow every element with the id of glow, to glow..

HTML Code:

<script type="text/javascript">
var color="#ce0000";//color of glow
function glow(){
//jQuery
  $(document).ready(function(){
    $('#glow').glow({//.glow is given by the scripts above.
      glowColor: color,//collour of glow in HEX or the name of the color, e.g. black
      glow: true,
      sparkle: true//optional
    });
  });
}
</script>

Next, we need to repeat this function over non stop.

HTML Code:

<script type="text/javascript">
var speed=2;//seconds
var int=speed*1000;//put speed into milliseconds 
setInterval(glow, int);//repeat the function "glow" on elements with #glow
</script>

Finlay put out an element with the #glow id.

HTML Code:

<div id="glow">This is glowing text</div>

Click here for working example.

Thread: Text "glow" effect jQuery

Thread Tools

Text "glow" effect jQuery

Posting Permissions