ACJavascripts.com - Free Javascripts: Gradient Text

Home - Free Javascripts - Tutorials - Tools - Templates - Forums

Home -> Text Effects -> Gradient Text

Script Name: Gradient Text
Author: Mark Williamson
Description: This script will create a very impressive animated gradient effect on your text.

Email This script to your friends!

Example:

(0l0urX

(0l0urX

Gr4d!eN+ C(-)4NgeR

by sl4ckw4re_syst3m

The AC CODE

Do what you like with this javascript. Its free to use, free to distribute, etc etc 
	   but please leave my name and email in there.

- This is a rework of the original ColourX Gradient Changer javascript
	   which has been available on javascripts.com for many years. 
	   This version was written from the ground up. 
	   I always said i would rewrite it and now i have - full mozilla 1.4 / IE6 support
	   which is better than in the olden days where it only worked in IE .
	   I haven't tried Opera7 but my guess is it would work without problems.

/* offset variable affects how smoothly it changes colour   -smoothest and slowest is 1 - top is about 20 but it can go higher but you wont see much happen */
	var offset = 10;

/* Div name we want to change the colour of */
	var targetDiv1 = 'colourx1';
	var targetDiv2 = 'colourx2';

/* modify this function to add extra divs to be coloured */
	function docolouring(colorx){
		/* ie / mozilla test */
		if(document.all){
			o = document.all[targetDiv1];
			o2 = document.all[targetDiv2];
		}else{
			o = document.getElementById(targetDiv1); 
			o2 = document.getElementById(targetDiv2); 
		}
		o.style.color = colorx;
		o2.style.color = colorx;
	}

function init() {

/* create currect colour value settings 
			you can either use random settings as here or give them 
			rgb colour values (number between 0 and 255) 	eg:
			rc = 255; gc = 0; bc = 0; 
		*/
   		rc = generateRandomNumber();
   		gc = generateRandomNumber();
   		bc = generateRandomNumber();
		
		/* call the loop function */	
		colourX(rc,gc,bc);	
	}

function colourX(rc, gc, bc){
		/* create numbers to count to */
   		red_dec = generateRandomNumber();
   		green_dec = generateRandomNumber();
   		blue_dec = generateRandomNumber();

/* just make sure that this isnt set to somthing stupid */
		if(offset < 0 || offset > 40){
			offset = 1;
		}
		/* logic to count towards the targets */
		if(rc < red_dec){
			rc+=offset;
		}else if(rc > red_dec){
			rc-=offset;
		}else{
			red_dec = generateRandomNumber();
		}	
		
		if(gc < green_dec){
			gc+=offset;
		}else if(gc > green_dec){
			gc-=offset;
		}else{
			green_dec = generateRandomNumber();
		}

if(bc < blue_dec){
			bc+=offset;
		}else if(bc > blue_dec){
			bc-=offset;
		}else{
			blue_dec = generateRandomNumber();
		}

/* convert the current colour values to hexadecimal */	
		base = 16;
	   	hexr = convDecTo( rc, base );
	   	hexg = convDecTo( gc, base );
	   	hexb = convDecTo( bc, base );

/* create the colour hex string */ 
 		var colorx = ([hexr]+[hexg]+[hexb]);

/* colour the div */
		docolouring(colorx);

/* back round we go... */
  		setTimeout("colourX("+rc+","+ gc+","+ bc+")", 0010);
	}

function generateRandomNumber(){
   		rand = Math.random();
		rand = rand * 1000;
		   rand = parseInt ( rand );	
		   if( rand > 255 )
		   {
			generateRandomNumber();
		   }
		   return rand;
	}

//-->
</script>