scroller.js

<DIV ID="controls">
<FORM>
<INPUT TYPE="button" VALUE="Toggle font change" ONCLICK="toggle_fontsize()">
<INPUT TYPE="button" VALUE="Toggle colorcycle" ONCLICK="toggle_color()">
<INPUT TYPE="button" VALUE="Toggle sinus" ONCLICK="toggle_sinus()">
<INPUT TYPE="button" VALUE="Toggle scrolling" ONCLICK="toggle_scroller()"><BR>
<INPUT TYPE="button" VALUE="Toggle colorfader" ONCLICK="toggle_fade()"> (only with font changer on, disables colorcycle)
</FORM>
</DIV>
</SPAN>
<div style="position:relative;margin-top:-300px;">
<SCRIPT LANGUAGE="javascript">
  /*
  Umm. Sorry for the lack of comments:)
  */
  
  // scroller config
  var message = ' .       .   .   .   . . . . . ... ... Yeah! This is it! This is the megakewl and unbelievably useless       Kaunis.to Scroller    |    - just like back in the good old days of Amiga demos. This kludge was coded by            SUMPPI!          |     If you\'d like to use this somewhere you can do so freely, just have my email and link to http://kaunis.to somewhere near the scroller. Thank you. Now, try some of the controls yourself... #';
  var x = 30; //how many characters on the scroller
  var xspace = 12; //space between letters in pixels
  var lines = 1; //how many lines on the scroller, more than 1 lines slows the scroller _a lot_
  var speed = 50; //speed of the scroller
  
  // sinus config
  var siny = 0; 
  var siny2 = 0.3; 
  var maxsiny = 30; 
  var sinx = 1.5; 
  var sinxspeed = 0.2; 
  var sinstep = 0.5 
  
  // font settings
  var fontstr = '18px courier'; //default font setting
  var minfont = 12; //minimum font size
  var maxfont = 25; //maximum font size
  var colors = new Array('FF0000','FF3300','FF6600','FF9900','FFCC00','FFFF00','CCFF00','99FF00','66FF00','33FF00','00FF00','00FF33','00FF66','00FF99','00FFCC','00FFFF','00CCFF','0099FF','0066FF','0033FF','0000FF','3300FF','6600FF','9900FF','CC00FF','FF00FF','FF0099','FF0066','FF0033');
  var defaultcolor = '#cccccc'; //default color for the scroller
  
  // layout settings
  var yorigo = 250; //vertical origo of the scroller
  var xorigo = 50; //horizontal origo of the scroller
  
  // default values for the toggles
  var changefont = false;
  var colorchanger = false;
  var colorfade = false;
  var dosinus = true;
  
  // global variables and temporary settings, brrrhhh
  var xtmp=0;var msgtmp=0;var doscroll=false;var scrollcount=0;var linecount=0;var runcount=0;var colorcount=0;var font=15;var dir2='up'; var msg=new Array();var controls=false;
  
  // the toggles, needed only for this demo page
  function toggle_fontsize() {if (changefont) {changefont = false;} else {changefont = true;}}
  function toggle_scroller() {if (doscroll) {doscroll = false;} else {doscroll = true;}}
  function toggle_color() {if (colorchanger) {colorchanger = false;} else {colorchanger = true;}}
  function toggle_fade() {if (colorfade) {colorfade = false;} else {colorfade = true;}}
  function toggle_sinus() {if (dosinus) {dosinus = false;} else {dosinus = true;}}
  
  function init() {
  
  	// slice the scroller string into an array
  	for (var i=0;i <= message.length-1;i++) {
  		msg[i] = message.charAt(i);
  	}
  
  	// create the character layers
  	for (var i=0;i <= x;i++) {
  		document.write('<DIV ID="lyr'+String(i)+'" STYLE="position:absolute; left:'+String(eval(xorigo+xtmp))+'px; top:'+yorigo+'px; font:'+fontstr+'; color:#CCCCCC; font-weight:bold; z-index:2"></DIV>');
  		xtmp = xtmp + xspace;
  		if (i == x) {
  			doscroll = true;
  			
  			// initiate scroller after evertyhing's fine
  			scroll();
  		}
  	}	
  }
  
  function settext(charcount) {
  	// clear existing message, only needed if multiple lines are scrolled, I think
  	if (lines > 1) {
  		for (var i=0;i <= x;i++) {
  			document.getElementById("lyr"+i).innerHTML = '';
  		}
  	}
  	
  	// write the scroller
  	for (a in msg) {
  		if (msgtmp >= x) {
  			msgtmp = 0;
  			linecount++
  		}
  		if (charcount >= msg.length) {
  			charcount = 0;
  		}
  		if (linecount >= lines) {
  			break;
  		}
  		
  		if (msg[charcount]=='|' && msgtmp == x-1 && !controls) {
  			stopon();
  			setTimeout('stopoff();',5000);
  		}
  		else if (msg[charcount]=='#' && msgtmp == x-1 && !controls) {
  			document.getElementById("controls").style.visibility = 'visible';
  			controls = true;
  		}
  		else {
  			if (msg[charcount]!='|'&&msg[charcount]!='#') {
  				// the actual writing, if more lines than one you need some extra stuff
  				if (lines > 1) {
  					document.getElementById("lyr"+msgtmp).innerHTML = document.getElementById("lyr"+msgtmp).innerHTML+msg[charcount]+'<BR><BR><BR>';
  				}
  				else {
  					document.getElementById("lyr"+msgtmp).innerHTML = msg[charcount];
  				}
  			}
  		}
  		
  		msgtmp++
  		charcount++
  	}
  	msgtmp = 0;
  	linecount = 0;
  }
  
  function stopon() {
  	toggle_scroller();
  	toggle_color();
  }
  
  function stopoff() {
  	toggle_color();
  	toggle_scroller();
  	scrollcount++
  }
  
  function dosine(start) {
  	for (var i=0;i <= x;i++) {
  		ypos = eval(100+Math.round(siny*Math.sin(-eval(start*sinxspeed)+i*siny2)))
  		document.getElementById("lyr"+i).style.top = eval(yorigo+ypos)+'px';
  	}
  }
  
  function setsine() {
  	if (dosinus) {
  		if (siny >= maxsiny) {
  			dir = 'down';
  		}
  		else if (siny <= 0) {
  			dir = 'up';
  		}
  		
  		if (dir == 'up') {
  			siny = eval(siny+sinstep);
  		}
  		else {
  			siny = eval(siny-sinstep);
  		}
  	}
  	else {
  		siny = 0;
  	}
  }
  
  function setcolor() {
  	if (colorchanger) {
  		for (var i=0;i <= x;i++) {
  			if (colorcount <= colors.length-2) {
  				colorcount++;
  			}
  			else {
  				colorcount=0;
  			}
  			document.getElementById("lyr"+i).style.color = '#'+colors[colorcount];
  		}
  		if (colorcount <= colors.length-2) {
  			colorcount++;
  		}
  		else {
  			colorcount=0;
  		}
  	}
  	else {
  		for (var i=0;i <= x;i++) {
  			document.getElementById("lyr"+i).style.color = defaultcolor;
  		}
  	}
  }
  
  function setfont() {
  	if (changefont) {
  		for (var i=0;i <= x;i++) {
  			if (font >= maxfont) {
  				dir2 = 'down';
  			}
  			else if (font <= minfont) {
  				dir2 = 'up';
  			}
  			
  			if (dir2 == 'up') {
  				font++
  			}
  			else {
  				font--
  			}
  			
  			document.getElementById("lyr"+i).style.font = font+'px courier';
  			
  			if (colorfade) {
  				if (font == minfont) {
  					fadecolor = '#333333'
  				}
  				else if (font == minfont+1) {
  					fadecolor = '#444444'
  				}
  				else if (font == minfont+2) {
  					fadecolor = '#555555'
  				}
  				else if (font == minfont+3) {
  					fadecolor = '#666666'
  				}
  				else if (font == minfont+4) {
  					fadecolor = '#777777'
  				}
  				else if (font == minfont+5) {
  					fadecolor = '#888888'
  				}
  				else if (font == minfont+6) {
  					fadecolor = '#999999'
  				}
  				else if (font == minfont+7) {
  					fadecolor = '#AAAAAA'
  				}
  				else if (font == minfont+8) {
  					fadecolor = '#BBBBBB'
  				}
  				else if (font == minfont+9) {
  					fadecolor = '#CCCCCC'
  				}
  				else if (font == minfont+10) {
  					fadecolor = '#DDDDDD'
  				}
  				else {
  					fadecolor = '#EEEEEE'
  				}
  				document.getElementById("lyr"+i).style.color = fadecolor;
  			}
  		}
  	}
  	else {
  		for (var i=0;i <= x;i++) {
  			document.getElementById("lyr"+i).style.font = fontstr;
  		}
  	}
  }
  
  function scroll() {
  	if (doscroll) {
  		settext(scrollcount);
  	}
  	
  	// check when to add more into the sinus, default is every third run
  	if (String(runcount).charAt(1) == 3||String(runcount).charAt(1) == 6||String(runcount).charAt(1) == 9) {
  		setsine();
  	}
  	
  	setcolor();
  	setfont();
  
  	dosine(eval(runcount*sinx));
  
  	runcount++
  	
  	setTimeout('scroll()',speed);
  	
  	if (doscroll) {
  		if (scrollcount >= msg.length) {
  			scrollcount = 0;
  		}
  		else {
  			scrollcount++
  		}
  	}
  }
  
  // check if netscape 4, if not then go!
  if (!document.layers) {
  	init();
  }
  else {
  	alert('Doesn\'t work on NS4');
  }
</script>
  </div>