Home / Snippets / dynamic_colours

This section is new and undergoing snippet addition, as of 13/6/11

Dynamic Colours

Doesn't have to be background colour, could be the text colour to something, border colour...whatever really.

	<script type="text/javascript">
	var r = 0;
	var g = 0;
	var b = 0;
	var run = 1;
	var timer = 1;
	
	function stopColour(i)
	{
	if(timer == 1){timer = 0;}
	else{timer = 1; colour(''+i+'');}
	}
	
	function colour(i)
	{
	
	if(timer < 1){exit;}
	
	switch(run)
	{
	case 1:
	if(r < 255){r++;}
	else{run = 2;}
	break;
	
	case 2:
	if(r > 0){r--;}
	else{run = 3;}
	break;
	
	case 3:
	if(g < 255){g++;}
	else{run = 4;}
	break;
	
	case 4:
	if(g > 0){g--;}
	else{run = 5;}
	break;
	
	case 5:
	if(b < 255){b++;}
	else{run = 6;}
	break;
	
	case 6:
	if(b > 0){b--;}
	else{run = 7;}
	break;
	
	
	
	
	case 7:
	if(r < 255){r++;}
	else{run = 8;}
	break;
	
	case 8:
	if(g < 255){g++;}
	else{run = 9;}
	break;
	
	case 9:
	if(r > 0){r--;}
	else{run = 10;}
	break;
	
	case 10:
	if(g > 0){g--;}
	else{run = 11;}
	break;
	
	
	
	
	case 11:
	if(r < 255){r++;}
	else{run = 12;}
	break;
	
	case 12:
	if(b < 255){b++;}
	else{run = 13;}
	break;
	
	case 13:
	if(r > 0){r--;}
	else{run = 14;}
	break;
	
	case 14:
	if(b > 0){b--;}
	else{run = 15;}
	break;
	
	
	
	
	
	case 15:
	if(g < 255){g++;}
	else{run = 16;}
	break;
	
	case 16:
	if(b < 255){b++;}
	else{run = 17;}
	break;
	
	case 17:
	if(g > 0){g--;}
	else{run = 18;}
	break;
	
	case 18:
	if(b > 0){b--;}
	else{run = 19;}
	break;
	
	
	case 19:
	if(r < 255){r++;}
	else{run = 20;}
	break;
	
	case 20:
	if(g < 255){g++;}
	else{run = 21;}
	break;
	
	case 21:
	if(b < 255){b++;}
	else{run = 22;}
	break;
	
	case 22:
	r = 0; g = 0; b = 0;
	run = 1;
	break;
	
	}
	
	document.getElementById(i).style.color = 'rgb('+r+','+g+','+b+')';
	var t = setTimeout("colour('"+i+"')", 10);
	}
	
	
	colour('div1');
	</script>

Example in action:


Click the box to STOP/START the script.

Comments

No Comments Have Been Made