Text Magnet Javascript

Text Magnet Javascript
Text magnet script pulls text letters to a given area of webpage

Handy Tip : Javascript code is in the main fast loading and can add functionality or good visual effects to web pages. It is entirely the webmasters opinion and personal taste as to what javascripts to add to a web page.

Bookmark This Page

Text Magnet Javascript by Urs Dudli & Peter Gehrig

The text magnet script adds a great visual effect to your webpage that will delight your visitors. The script draws your text letters together to a given area of your webpage, just as if attracted by a magnet.

Simple to install with all customization instructions at the top of the script. Can be placed anywhere on the page but cannot be placed in containers such as in tables and div tags.

Add as many messages as you like. Change the font colors, size, style and pause time between messages of the text magnet can be altered to suit.

Installation:

Copy the code below and paste this between the <body> and </body> tags of your html where you want the final message text to appear. Do not paste inside tables and div tags.

Change the messages, letter colors, font type, size and pause duration between messages, where indicated at the top of the script.

<SCRIPT> // CREDITS: // Letter 
Magnet // By Urs Dudli and Peter Gehrig // Copyright (c) 2002 Peter Gehrig and 
Urs Dudli. All rights reserved. // Permission given to use the script provided 
that this notice remains as is. // Distributed by http://www.hypergurl.com var 
text=new Array() var textsplashcolors=new Array() // Place your messages below. 
Add as many as you like! text[0]="Welcome to hypergurl.com." text[1]="Another 
great javascript by Urs Dudli and Peter Gehrig ..." text[2]="Text Magnet 
makes a excellent effect for webpages." text[3]="Thrill your vistors 
with this script ..." text[4]="Grab the code now!." // Change the 
letter colors here textsplashcolors[0]="#000000" textsplashcolors[1]="#ff0000" 
textsplashcolors[2]="#008800" textsplashcolors[3]="#0000ff" 
textsplashcolors[4]="#880088" textsplashcolors[5]="#ff9700" 
// Change the font var textfont="Arial" // Change the font-size for 
IE4x/5x/6x and NS6x (CSS-standard) var textfontsize=12 // Change the font size 
for NS4x (HTML-standard) var textfontsizeHTML=3 // Change 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 changecontent() { messagewidth=0 var textsa=text[i_text] 
textsplitted=textsa.split("") if (ie) { for (i=0;i<=textsplitted.length-1;i++) 
{ var thisspan=eval("document.all.span"+i) thisspan.innerHTML=""+textsplitted[i]+"" 
i_colors++ if (i_colors>textsplashcolors.length-1) {i_colors=0} letterwidth[i]=Math.round(thisspan.offsetWidth*1.2) 
if (letterwidth[i]==0) {letterwidth[i]=parseInt(textfontsize)} messagewidth+=letterwidth[i] 
messageheight=Math.round(document.all.span0.offsetHeight) } } if (ns6) { for (i=0;i<=textsplitted.length-1;i++) 
{ var thisspan=eval(document.getElementById('span'+i)) thisspan.innerHTML=""+textsplitted[i]+"" 
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) } } if 
(ns4) { for (i=0; i<textsplitted.length-1; i++) { var thisspan=eval("document.span"+i+".document") 
thisspan.write(""+textitalicA+textweightA+textsplitted[i]+textweightB+textitalicB+"") 
thisspan.close() letterwidth[i]=Math.round(thisspan.width*1.2) if (letterwidth[i]==0) 
{letterwidth[i]=textfontsize} messagewidth+=letterwidth[i] messageheight=Math.round(document.span0.document.height) 
thisspan.clear() i_colors++ if (i_colors>textsplashcolors.length-1) {i_colors=0} 
} for (i=0; i<textsplitted.length-1; i++) { var thisspan=eval("document.span"+i) 
thisspan.visibility="show" } } i_text++ if (i_text>=text.length) 
{i_text=0} getfinalpos() } function getfinalpos() { if (ie || ns6) {var padding_x=100}; 
if (ns4) {var padding_x=40}; if (ie || ns6) {var padding_y=80}; if (ns4) {var 
padding_y=40}; if (textalignabsolute=="middlecenter") { x_finalpos[0]=(windowwidth-messagewidth)/2 
y_finalpos=(windowheight-messageheight)/2 } else if (textalignabsolute=="topleft") 
{ x_finalpos[0]=5 y_finalpos=0 } else if (textalignabsolute=="topcenter") 
{ x_finalpos[0]=(windowwidth-messagewidth)/2 y_finalpos=0 } else if (textalignabsolute=="topright") 
{ x_finalpos[0]=windowwidth-messagewidth y_finalpos=0 } else if (textalignabsolute=="bottomleft") 
{ x_finalpos[0]=5 y_finalpos=windowheight-messageheight } else if (textalignabsolute=="bottomcenter") 
{ x_finalpos[0]=(windowwidth-messagewidth)/2 y_finalpos=windowheight-messageheight 
} else if (textalignabsolute=="bottomright") { x_finalpos[0]=windowwidth-messagewidth 
y_finalpos=windowheight-messageheight } for (i=1;i<textsplitted.length-1;i++) 
{ x_finalpos[i]=x_finalpos[i-1]+letterwidth[i-1] } gotostartpos() } function gotostartpos() 
{ if (ie) { for (i=0;i<textsplitted.length-1;i++) { var thisspan=eval("document.all.span"+i+".style") 
thisspan.posLeft=randomizer(startposmax_x) thisspan.posTop=randomizer(startposmax_y) 
} } if (ns4) { for (i=0;i<textsplitted.length-1;i++) { var thisspan=eval("document.span"+i) 
thisspan.left=randomizer(startposmax_x) thisspan.top=randomizer(startposmax_y) 
} } if (ns6) { for (i=0;i<textsplitted.length-1;i++) { var thisspan=eval("document.getElementById('span'+i).style") 
thisspan.left=randomizer(startposmax_x) thisspan.top=randomizer(startposmax_y) 
} } gotostandstillpos() } function gotostandstillpos() { if (ie) { if (i_loop<=max_loop-1) 
{ for (i=0;i<textsplitted.length-1;i++) { var thisspan=eval("document.all.span"+i+".style") 
x_step[i]=(x_finalpos[i]-thisspan.posLeft)/(max_loop-i_loop) y_step[i]=(y_finalpos-thisspan.posTop)/(max_loop-i_loop)	
thisspan.posLeft+=x_step[i] thisspan.posTop+=y_step[i] } i_loop++ var timer=setTimeout("gotostandstillpos()",20) 
} else { i_loop=0 clearTimeout(timer) timer=setTimeout("gotoendpos()",textpause) 
} } if (ns4) { if (i_loop<=max_loop-1) { for (i=0;i<textsplitted.length-1;i++) 
{ var thisspan=eval("document.span"+i) x_step[i]=(x_finalpos[i]-thisspan.left)/(max_loop-i_loop) 
y_step[i]=(y_finalpos-thisspan.top)/(max_loop-i_loop) thisspan.left+=x_step[i] 
thisspan.top+=y_step[i] } i_loop++ var timer=setTimeout("gotostandstillpos()",20) 
} else { i_loop=0 clearTimeout(timer) timer=setTimeout("gotoendpos()",textpause) 
} } if (ns6) { 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] 
thisspan.top=parseInt(thisspan.top)+y_step[i] } i_loop++ var timer=setTimeout("gotostandstillpos()",20) 
} else { i_loop=0 clearTimeout(timer) timer=setTimeout("gotoendpos()",textpause) 
} } } 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>

That's it! Enjoy.

Hypergurl Hosting

IMPROVED PLANS
FREE Domain Name

web hosting and domain registration

NEW!
Blog for Webmasters

Website Design

Home