Letter Magnet

Letter Magnet
Spectacular way to present your messages. Letter Magnet pulls the letters of your messages together until they form a neat line of text. You may add as many messages as you like. Easy configuration of font-attributes. Crossbrowser.

Create more than 20 different text animations
Letter Magnet is part of the new unique Text Animator. Text Animator allows you to create 20 different text animations for your webpages in no time. Setting font-attributes, styles, size and speed, links, targets and much more requires no programming skills at all. You can view, check and edit all effects while you are creating them. Text Animator generates the finished code for your personalized text animations. Click here to test Text Animator (requires Internet Explorer 5.5x or higher).

Configuration:

Step 1: Open your webpage. Paste the following code below the <body> tag of your webpage:

<SCRIPT>
// CREDITS:
// Letter Magnet
// By Urs Dudli and Peter Gehrig
// Copyright (c) 2002 Peter Gehrig and Urs Dudli. All rights reserved.

var text=new Array()
var textsplashcolors=new Array()

// Your messages. Add as many as you like!
text[0]="Hello Friends! Welcome to our letter magnet."
text[1]="This is only one way to impress your visitors ..."
text[2]="with our new TEXT ANIMATOR."
text[3]="With Text Animator you create ..."
text[4]="more than 20 different animations."

// The colors of the letters 
textsplashcolors[0]="#000000"
textsplashcolors[1]="#ff0000"
textsplashcolors[2]="#008800"
textsplashcolors[3]="#0000ff"
textsplashcolors[4]="#880088"
textsplashcolors[5]="#ff9700"

// the font
var textfont="Arial"

// the font-size for IE4x/5x/6x and NS6x (CSS-standard)
var textfontsize=12

// the font size for NS4x (HTML-standard)
var textfontsizeHTML=3

// the pause between the messages (seconds)
var textpause=3

// Do not edit below this line
var textweight="bold"
var textweightA=""
var textweightB=""
var textitalic="normal"
var textitalicA=""
var textitalicB=""
var textalignabsolute="topleft"
var letterwidth=new Array()
var messagewidth=0
var messageheight=0
var i_colors=0
var letterspace=Math.floor(textfontsize/1.3)
var timer
var i_text=0
var textsplitted
var i_textpath=0
var endpause=1
var endpausemilli=endpause*10
var maxtextlength=0
var i_endposition=0
var windowwidth=0
var windowheight=0
var windowwidthfactor=1
var windowheightfactor=1
var i_span=0
var startposmax_x=0
var startposmax_y=0
textpause*=1000
var x_step=new Array()
var y_step=new Array()
var x_finalpos=new Array()
var y_finalpos=0
var max_loop=20
var i_loop=0

var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0 
var ie=document.all?1:0

for (i=0;i<=text.length-1;i++) {
	if (text[i].length>=maxtextlength) {maxtextlength=text[i].length}
}
for (i=0;i<=text.length-1;i++) {
	text[i]=text[i]+" "
}

var xpos=new Array()
for (i=0;i<=maxtextlength;i++) {
	xpos[i]=5000
}

var ypos=new Array()
for (i=0;i<=maxtextlength;i++) {
	ypos[i]=5000
}

function randomizer(range) {		
	return Math.floor(range*Math.random())
}

function getpagesize() {
	if (ie) {
		windowheight=parseInt(document.body.clientHeight)
		windowwidth=parseInt(document.body.clientWidth)
	}
	if (ns4 || ns6) {
		windowheight=parseInt(window.innerHeight)
		windowwidth=parseInt(window.innerWidth)
	}
	startposmax_x=windowwidth-2*parseInt(textfontsize)
	startposmax_y=windowheight-2*parseInt(textfontsize)

changecontent()
}

function gotoendpos() {
	if (ie) {
		if (i_loop<=textsplitted.length-1) {
			var thisspan=eval("document.all.span"+i_loop+".style")
			thisspan.posLeft=-1000
			i_loop++
			var timer=setTimeout("gotoendpos()",10)
		}
		else {
			clearTimeout(timer)
			i_loop=0
			var timer=setTimeout("changecontent()",400)
		}
	}
	if (ns4) {
		if (i_loop<=textsplitted.length-1) {
			var thisspan=eval("document.span"+i_loop)
			thisspan.left=-1000
			i_loop++
			var timer=setTimeout("gotoendpos()",10)
		}
		else {
			clearTimeout(timer)
			i_loop=0
			changecontent()
		}
	}
	
	if (ns6) {
		if (i_loop<=textsplitted.length-1) {
			var thisspan=eval("document.getElementById('span'+i_loop).style")
			thisspan.left=-1000
			i_loop++
			var timer=setTimeout("gotoendpos()",10)
		}
		else {
			clearTimeout(timer)
			i_loop=0
			changecontent()
		}
	}
}

if (ie) {
	for (i=0;i<=maxtextlength;i++) {
 	document.write("")
		
 	document.write("")
	}
	window.onload=getpagesize
}
if (ns6) {
	for (i=0;i<=maxtextlength;i++) {
 	document.write("")
		document.write(textsplitted)
 	document.write("")
	}
	window.onload=getpagesize
}
if (ns4) {
	for (i=0;i<=maxtextlength;i++) {
 	document.write("<layer name='span"+i+"' visibility=hide>")
		document.write(textsplitted)
 	document.write("</layer>")
	}
	window.onload=getpagesize
}
</script>

IMPORTANT: do not paste the code into table-cells or between <div> tags or tags!

Step 2: Open your webpage. Go to the top of the script-code and configure the messages and font-attributes

Step 3: Have fun!