4umi.com/web/javascript/rider

Moving text colours

Dynamic Javascript

This page features a script which makes a colour move through the letters of a text.

The script

Mouse over the various items to highlight them across the script.

var tim = null;
function goride() {
 var p = gid( 'p' ); if( p ) {
  var c = '#f06666', j, o = p.cloneNode( true ), s = o.style;
  o.id = 'rider';
  o.removeChild( o.lastChild );
  s.position = 'absolute'; s.left = getpos( p ).x; s.zIndex = '2';
  s.fontWeight = 'bold';
  s.color = c;
  for( j = o.firstChild; j!==null; j = j.nextSibling ) {
   if( ( s = j.style ) ) { s.color = c; }
  }
  p.parentNode.insertBefore( o, p );
  ride( 0, 1 );
 }
}

function ride( p, d ) {
 var c = gid( 'rider' ), w = c.offsetWidth, l = p, r = l + 20;
 p += d;
 if( 0 > p || p > w - 20 ) { d *= -1; }
 c.style.clip = 'rect( auto ' + r + 'px auto ' + l + 'px )';
 tim = window.setTimeout( 'ride( ' + p + ', ' + d + ' );', 50 );
}