« »

Spectacular way to welcome your visitors. Text Wheel rotate your messages like a wheel in the middle of your webpage. You may add as many messages as you like. Easy configuration of font, font-size, font-color and font-weight.

Label: TextWheel

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<script>
<!-- Beginning of JavaScript -

// CREDITS:
// TextWheel by Julian Paulus

var message = new Array()
message[0]=" >>>> a7ebech hwaya"
message[1]=" >>>> amoot 3alech"
message[2]=" >>>> danara 7ayati"
message[3]=" >>>> danara roo7i"
message[4]=" >>>> Danara malaki"
message[5]=" >>>> danara 7abibty"

// Edit the width an height of your TextWheel (pixels)
var scrollerheight=120
var scrollerwidth=360

// Edit the font
var font_family="Verdana"

// Edit the font-size
var font_size=20

// Edit the horizontal and vertical position of your TextWheel (pixels)
var x_textposition=12
var y_textposition=12
function initiate() {
	if (document.all) {	
		document.all.rotationstyle1.style.posLeft=x_textposition
		document.all.rotationstyle1.style.posTop=y_textposition
		
		document.all.rotationstyle2.style.posLeft=x_textposition
		document.all.rotationstyle2.style.posTop=y_textposition
		
		document.all.rotationstyle3.style.posLeft=x_textposition
		document.all.rotationstyle3.style.posTop=y_textposition
		
		document.all.rotationstyle4.style.posLeft=x_textposition
		document.all.rotationstyle4.style.posTop=y_textposition
		
		document.all.rotationstyle5.style.posLeft=x_textposition
		document.all.rotationstyle5.style.posTop=y_textposition
		
		document.all.rotationstyle6.style.posLeft=x_textposition
		document.all.rotationstyle6.style.posTop=y_textposition
		
		setmessages()
		}
}

function setmessages() {

		rotationstyle1.innerHTML=
		'<OBJECT ID="rotationobj1" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6" STYLE="position:relative;width:'+scrollerwidth+'px;height:'+2*scrollerheight+'px">'+
        '<PARAM NAME="Line0001" VALUE="SetLineStyle(0)">'+
        '<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,0)">'+
		'<PARAM NAME="Line0003" VALUE="SetFillColor(255,255,0)">'+
		'<PARAM NAME="Line0004" VALUE="SetFont(\''+font_family+'\', '+font_size+', 400, 0, 0, 0)">'+
		'<PARAM NAME="Line0005" VALUE="Text(\''+message[0]+'\',0, 2, 0)">'+
		'</OBJECT>'		
		
		rotationstyle2.innerHTML=
		'<OBJECT ID="rotationobj2" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6" STYLE="position:relative;width:'+scrollerwidth+'px;height:'+2*scrollerheight+'px">'+
        '<PARAM NAME="Line0001" VALUE="SetLineStyle(0)">'+
        '<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,0)">'+
		'<PARAM NAME="Line0003" VALUE="SetFillColor(255,255,0)">'+
		'<PARAM NAME="Line0004" VALUE="SetFont(\''+font_family+'\', '+font_size+', 400, 0, 0, 0)">'+
		'<PARAM NAME="Line0005" VALUE="Text(\''+message[1]+'\',0, 2, 0)">'+
		'</OBJECT>'	
		
		rotationstyle3.innerHTML=
		'<OBJECT ID="rotationobj3" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6" STYLE="position:relative;width:'+scrollerwidth+'px;height:'+2*scrollerheight+'px">'+
        '<PARAM NAME="Line0001" VALUE="SetLineStyle(0)">'+
        '<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,0)">'+
		'<PARAM NAME="Line0003" VALUE="SetFillColor(255,255,0)">'+
		'<PARAM NAME="Line0004" VALUE="SetFont(\''+font_family+'\', '+font_size+', 400, 0, 0, 0)">'+
		'<PARAM NAME="Line0005" VALUE="Text(\''+message[2]+'\',0, 2, 0)">'+
		'</OBJECT>'	
		
		rotationstyle4.innerHTML=
		'<OBJECT ID="rotationobj4" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6" STYLE="position:relative;width:'+scrollerwidth+'px;height:'+2*scrollerheight+'px">'+
        '<PARAM NAME="Line0001" VALUE="SetLineStyle(0)">'+
        '<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,0)">'+
		'<PARAM NAME="Line0003" VALUE="SetFillColor(255,255,0)">'+
		'<PARAM NAME="Line0004" VALUE="SetFont(\''+font_family+'\', '+font_size+', 400, 0, 0, 0)">'+
		'<PARAM NAME="Line0005" VALUE="Text(\''+message[3]+'\',0, 2, 0)">'+
		'</OBJECT>'	
		
		rotationstyle5.innerHTML=
		'<OBJECT ID="rotationobj5" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6" STYLE="position:relative;width:'+scrollerwidth+'px;height:'+2*scrollerheight+'px">'+
        '<PARAM NAME="Line0001" VALUE="SetLineStyle(0)">'+
        '<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,0)">'+
		'<PARAM NAME="Line0003" VALUE="SetFillColor(255,255,0)">'+
		'<PARAM NAME="Line0004" VALUE="SetFont(\''+font_family+'\', '+font_size+', 400, 0, 0, 0)">'+
		'<PARAM NAME="Line0005" VALUE="Text(\''+message[4]+'\',0, 2, 0)">'+
		'</OBJECT>'	
		
		rotationstyle6.innerHTML=
		'<OBJECT ID="rotationobj6" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6" STYLE="position:relative;width:'+scrollerwidth+'px;height:'+2*scrollerheight+'px">'+
        '<PARAM NAME="Line0001" VALUE="SetLineStyle(0)">'+
        '<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,0)">'+
		'<PARAM NAME="Line0003" VALUE="SetFillColor(255,255,0)">'+
		'<PARAM NAME="Line0004" VALUE="SetFont(\''+font_family+'\', '+font_size+', 400, 0, 0, 0)">'+
		'<PARAM NAME="Line0005" VALUE="Text(\''+message[5]+'\',0, 2, 0)">'+
		'</OBJECT>'	
		
		rotationobj1.Rotate(0,0,0) 
		rotationobj2.Rotate(0,60,0) 
		rotationobj3.Rotate(0,120,0) 
		rotationobj4.Rotate(0,180,0) 
		rotationobj5.Rotate(0,240,0) 
		rotationobj6.Rotate(0,300,0) 
		
		startscroll()
}

function startscroll() {
        rotationobj1.Rotate(1,2,0) 
		rotationobj2.Rotate(1,2,0) 
		rotationobj3.Rotate(1,2,0) 
		rotationobj4.Rotate(1,2,0) 
		rotationobj5.Rotate(1,2,0) 
		rotationobj6.Rotate(1,2,0) 
		timer=setTimeout("startscroll()",20)
}


// - End of JavaScript - -->
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<body onload="initiate()">
<span id="rotationstyle1" style="position: absolute;">
<object id="rotationobj1" classid="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
</object>
</span>

<span id="rotationstyle2" style="position: absolute;">
<object id="rotationobj2" classid="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
</object>
</span>

<span id="rotationstyle3" style="position: absolute;">
<object id="rotationobj3" classid="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
</object>
</span>

<span id="rotationstyle4" style="position: absolute;">
<object id="rotationobj4" classid="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
</object>
</span>

<span id="rotationstyle5" style="position: absolute;">
<object id="rotationobj5" classid="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
</object>
</span>

<span id="rotationstyle6" style="position: absolute;">
<object id="rotationobj6" classid="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
</object>
</span>

<div id="Belongs_not_to_the_script" style="position: absolute; top: 200px; left: 5px;">
<font size="5" face="Verdana" color="#ffffff">

</font><p align="center"><font size="5" face="Verdana" color="#ffffff"> <a href="mailto:mannipaul@hotmail.com">
mannipaul@hotmail.com</a></font></p>
<font size="5" face="Verdana" color="#ffffff">
</body>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->