Fun of JavaScript: Letter Magnet TICKER

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com

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.

Configuration:

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

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

// CONFIGURATION:
// Go to http://www.fabulant.com
// and create your own text animation
// with our new Text Factory.

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

///////////////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STARTS HERE
///////////////////////////////////////////////////////////

// Your messages. Add as many message as you like
text[0]="Welcome to our letter magnet."
text[1]="Impress your visitors!"
text[2]="Add some fun to your messages."
text[3]="Install this text script."
text[4]="No programming skills are required."

// The colors of the letters. Add as many colors as you like
textsplashcolors[0]="#0F0273"
textsplashcolors[1]="#0F0273"
textsplashcolors[2]="#0F0273"
textsplashcolors[3]="#0F0273"
textsplashcolors[4]="#0F0273"

// the font
var textfont="Arial"

// the font-size (pt)
var textfontsize=12

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

// width of ticker, pixels
var ticker_width=420

// height of ticker, pixels
var ticker_height=40

// height of the spreading zone
var spread_height=15

// weight. Set this value to normal or bold
var textweight="bold"

// style. Set this value to normal or italic
var textitalic="normal"

///////////////////////////////////////////////////////////
// SCRIPT-CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////

// Do not edit below this line
var textalignabsolute="topcenter"
var letterwidth=new Array()
var messagewidth=0
var messageheight=0
var i_colors=0
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 (ns6) {
		windowheight=parseInt(window.innerHeight)
		windowwidth=parseInt(window.innerWidth)
	}
	startposmax_x=ticker_width
	startposmax_y=spread_height*ticker_height

changecontent()
}

function changecontent() {
	messagewidth=0
	var textsa=text[i_text]
	textsplitted=textsa.split("")

for (i=0;i<=textsplitted.length-1;i++) {
		var thisspan=eval("document.getElementById('span"+i+"')")
    	thisspan.innerHTML="<span style='font-family:"+textfont+";font-size:"+textfontsize+"pt;font-style:"+textitalic+";font-weight:"+textweight+";color:"+textsplashcolors[i_colors]+"'>"+textsplitted[i]+"</span>"
		i_colors++
		if (i_colors>textsplashcolors.length-1) {i_colors=0}
		letterwidth[i]=Math.round(parseInt(thisspan.offsetWidth)*1.2)
		if (letterwidth[i]==0) {letterwidth[i]=textfontsize}
		messagewidth+=letterwidth[i]
		messageheight=Math.round(document.getElementById('span0').offsetHeight)
	}	
	i_text++ 
	if (i_text>=text.length) {i_text=0}
	getfinalpos()
}

function getfinalpos() {
	var padding_x=0
	var padding_y=0
	x_finalpos[0]=0
	y_finalpos=0

for (i=1;i<textsplitted.length-1;i++) {
		x_finalpos[i]=x_finalpos[i-1]+letterwidth[i-1]
	}
	gotostartpos()
}

function gotostartpos() {
	for (i=0;i<textsplitted.length-1;i++) {
		var thisspan=eval("document.getElementById('span'+i).style")
		thisspan.left=randomizer(startposmax_x)+"px"
		thisspan.top=randomizer(startposmax_y)+"px"
	}
	gotostandstillpos()
}

function gotostandstillpos() {
	if (i_loop<=max_loop-1) {
		for (i=0;i<textsplitted.length-1;i++) {
			var thisspan=eval("document.getElementById('span"+i+"').style")
			x_step[i]=(x_finalpos[i]-parseInt(thisspan.left))/(max_loop-i_loop)
			y_step[i]=(y_finalpos-parseInt(thisspan.top))/(max_loop-i_loop)		
			thisspan.left=(parseInt(thisspan.left)+x_step[i])+"px"
			thisspan.top=(parseInt(thisspan.top)+y_step[i])+"px"
		}
		i_loop++
		var timer=setTimeout("gotostandstillpos()",20)
	}
	else {
		i_loop=0
		clearTimeout(timer)
		timer=setTimeout("gotoendpos()",textpause)
	}
}

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

document.write("<div id='roofmagnet' style='position:relative;width:"+ticker_width+"px;height:"+ticker_height+"px'>")	
for (i=0;i<=maxtextlength;i++) {
    document.write("<span id='span"+eval(i)+"' style='position:absolute;'>")
    document.write("</span>")
}
document.write("</div>")	
window.onload=getpagesize

</script>

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