Fun of JavaScript: free message carousel

» 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

Message Carousel
This free copy&paste JavaScript creates a eye-catching carousel ticker with cute opacity-effect. The ticker rotates through as many messages as you like. Easy 1-minute-configuration of speed, font, font-size, colors and tickersize. Each message can be linked. Internet Explorer 5x/6x/7x/8x, Firefox 2x/3x, Opera 8x/9x/10x, Google Chrome 3x/4x/5x.

Configuration:

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

<style>

a.textstyle {
font-family:Arial;
font-size:10pt;
font-weight:normal;
font-style:normal;
color:blue;
text-decoration:none;
background-color:white;
padding:4px;
}

a.textstyle:visited {
color:blue;
}

a.textstyle:hover {
color:red;
text-decoration:none;
background-color:black;
color:white;
}

.boxstyle {
position:absolute;
visibility:visible;
}
</style>

// 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 rotatingtext=new Array()
var rotatinglink=new Array()

///////////////////////////////////////////////////////////////////////////////////////
// START OF SCRIPT-CONFIGURATION ZONE 
//////////////////////////////////////////////////////////////////////////////////////

// Your messages. Add as many as you like
rotatingtext[0]="imagine"
rotatingtext[1]="there's no heaven"
rotatingtext[2]="it's easy"
rotatingtext[3]="if you try"
rotatingtext[4]="no hell below us"
rotatingtext[5]="above us only sky"
rotatingtext[6]="imagine"
rotatingtext[7]="all the people"
rotatingtext[8]="living for today"
rotatingtext[9]="imagine"
rotatingtext[10]="there's"
rotatingtext[11]="no countries"
rotatingtext[12]="It isn't hard"
rotatingtext[13]="to do"
rotatingtext[14]="nothing to kill"
rotatingtext[15]="or die for"
rotatingtext[16]="and"
rotatingtext[17]="no religion too"
rotatingtext[18]="imagine"
rotatingtext[19]="all the people"
rotatingtext[20]="living life"
rotatingtext[21]="in peace"

// The links corresponding to the messages above. 
// Each message has a link of its own
// If no link is reqired add "#" instead of a URL (see smaple below)

rotatinglink[0]="http://www.hotscripts.com"
rotatinglink[1]="http://www.scripts.com"
rotatinglink[2]="http://www.google.com"
rotatinglink[3]="http://www.fabulant.com"
rotatinglink[4]="http://www.dynamicdrive.com"
rotatinglink[5]="http://www.hotscripts.com"
rotatinglink[6]="http://www.hotscripts.com"
rotatinglink[7]="http://www.hotscripts.com"
rotatinglink[8]="#"
rotatinglink[9]="#"
rotatinglink[10]="#"
rotatinglink[11]="http://www.hotscripts.com"
rotatinglink[12]="http://www.hotscripts.com"
rotatinglink[13]="http://www.hotscripts.com"
rotatinglink[14]="http://www.hotscripts.com"
rotatinglink[15]="http://www.hotscripts.com"
rotatinglink[16]="http://www.hotscripts.com"
rotatinglink[17]="http://www.hotscripts.com"
rotatinglink[18]="http://www.hotscripts.com"
rotatinglink[19]="http://www.hotscripts.com"
rotatinglink[20]="http://www.hotscripts.com"
rotatinglink[21]="ihttp://www.hotscripts.com"

// Set the width of the inner-circle (pixels)
var textwidth=330

// Set the height of the inner-circle (pixels)
var textheight=120

// Set the number of words that will be displayed at once
var displaymax=9

// Set the speed! Tha values may range from 0.1 to 1.0
var step = 0.02;

/////////////////////////////////////////////////////////////////////////////////////
// END OF SCRIPT-CONFIGURATION ZONE
// Do not edit below
////////////////////////////////////////////////////////////////////////////////////

var maxopacity=new Array()
var i_wordcounter=0
var segment=360/(displaymax);
var tmr
var decrement=0;
textwidth=textwidth/2
textheight=textheight/2
var opacitystep=Math.round(100/textheight)
var spc="\&"+"nbsp;"

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

for (i=0;i<rotatingtext.length;i++) {
	rotatingtext[i]=rotatingtext[i].replace(/[" "]/g,spc)
}

for (i=0;i<displaymax;i++) {
	maxopacity[i]=1
}

function getpagesize() {
	windowwidth=parseInt(document.body.clientWidth)
	windowheight=parseInt(document.body.clientHeight)
	twidth=Math.floor(textwidth)
	theight=Math.floor(textheight)
	rotatetext()
}

function stoprotating(thisobj) {
	clearTimeout(tmr)
	zoomobj=thisobj
}

function restartrotating() {
	rotatetext()
}

document.write('<div id="roof" style="position:relative;width:'+(2*textwidth)+'px;height:'+(2*textheight)+'px;">');
for (i=0;i<displaymax;i++) {
	document.write('<div id="span'+i+'" class="boxstyle" style="filter:alpha(opacity=100);opacity:1"></div>');
}
document.write('</div>');
window.onload=getpagesize;
</script>

Step 2: Go to the <style>-tags and set the textstyle.

Step 3: Go on top of the script code and configure the messages, links, speeed.