Fun of JavaScript: Textrapper

» 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

Textrapper
This Fun JavaScript makes your messages dance and wriggle through your webpage. Easy configuration of font-attributes, style and messages. You may even change the path of movement (just use your imagemap-tool). Internet Explorer 5x/6x/7x/8x/9x, Firefox 2x/3x, Opera 7x/8x/9x/10x/11x, Google Chrome 4x/5x/6x/7x/8x.

Configuration:

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

// 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

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

/////////////////////////////////////////////
// START OF CONFIGURATION ZONE //
/////////////////////////////////////////////

// your messages. Add as many as you like
text[0]="HELLO VISITOR"
text[1]="WELCOME TO OUR HOMEPAGE"
text[2]="ENJOY OUR FREE SCRIPTS"
text[3]="BE HAPPY DON'T WORRY"

// letter-color
textsplashcolors[0]="#0F0273"

// font
var textfont="Times"

// font-size (pt)
var textfontsize=10

// font-weight, enter "normal" or "bold"
var textweight="normal"

// font-style, enter "normal" or "italic"
var textitalic="normal"

// pause between messages (seconds)
var textpause=2

// the path of the movement (x-coordinate, y-coordinate and so on). Tip: use your imagemap-tool to set a path of your own (just extracte the coordinates from your imagemap-tool)
var textpath=new Array(97,5,91,5,90,5,85,7,77,10,71,13,65,14,59,15,54,17,48,20,43,24,38,27,34,31,30,37,24,43,20,49,18,52,17,58,15,65,14,70,12,75,12,80,12,86,12,96,12,100,17,112,21,121,24,126,31,135,37,140,48,141,56,142,64,143,73,143,81,143,89,143,95,143,104,143,109,143,117,142,123,137,126,132,126,124,126,117,126,113,121,108,114,103,103,98,91,92,80,87,71,82,69,81,69,77,69,71,69,62,69,54,70,47,73,41,80,35,84,31,94,28,107,27,126,30,140,43,142,54,141,64,134,71,122,76,110,78,101,82,93,90,90,96,89,104,89,112,96,121,113,130,133,130,146,127,160,121,171,111,176,99,176,86,176,73,176,63,176,51,174,45,170,37,164,28,161,24,148,16,134,11,122,7,104,4,93,4,85,4,74,4,67,4,60,4,48,4,35,4,25,4,18,4,9,4,8,4,8,4,0,0,0,0)

/////////////////////////////////////////////
// END OF CONFIGURATION ZONE //
/////////////////////////////////////////////

// DO NOT EDIT CODE BELOW THIS LINE

var textfontsizeHTML=3
var textweightA="<b>"
var textweightB="</b>"
var textitalicA=""
var textitalicB=""
var windowwidthOri=330
var windowheightOri=250
textpause*=1000

var spanwidth=new Array()
var i_colors=0
var letterspace=Math.floor(textfontsize/1.4)

var tickerleft=textpath[textpath.length-2]
var tickertop=textpath[textpath.length-1]
var timer
var finalxpos=tickerleft
var i_text=0
var textsage=""
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 message=new Array()

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

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())
}

}
			for (i=0; i<textsage.length-1; i++) {
    			var thisspan=eval("document.span"+i)
    			thisspan.visibility="show"
    		}
		}
		i_text++ 
		if (i_text>=text.length) {i_text=0}
		finalxpos=tickertop
		i_textpath=0
		makesnake()
}

Step 2: Go to the top of the script and configure font-attributes, colors and path of movement.