Free JavaScript: CSS3 Message Propeller

» 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

CSS3 Message Propeller
Do you want a text display that's much more eyecatching than any text ticker or scroller? Try this unique linkable CSS3 message propeller! The special propelling effect is supported by browsers, that are CSS3-ready (Firefox3.6+, Chrome 4+, Safari 4+, Opera 10.5+). All other browsers show clean message display.

Configuration:

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

a.linkstyle { 
	font-family:Arial;
	font-size:11pt;
	font-weight:bold;
	color:black;
	text-decoration:none;
}

a.linkstyle:hover { 
	/* change of color on mouseover */
	color:blue;
}

.shodowboxie {
	/* Shadow for Internet Explorer 5.5+ */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#CCCCCC');
}

.rotatebox { 
	float:left;
	position:absolute;
	top:0px;
	left:0px;
	display:block; 
	-webkit-transform: rotate(0deg); 
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);	
} 
</style>

// CREDITS:
// CSS3 Message Propeller
// by Peter Gehrig 
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com
// 08/17/2010

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

// CONFIGURATION:
// Go to http://www.fabulant.com and get the original code 
// with step-by-step instructions and copy-and-paste installation.

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

// Set the elements of your ticker. Each block below contains the messages and links. Just follow the rules below:

// { Each block starts with this brackets
// message : "enter your message followed by a comma", This line ends with a comma
// linkto : "http://the-url-of-your-link.com" This line does not end with a comma
//}, Each block ends with a bracket and comma. ATTENTION: The very last block does not end with a comma!!!

var ticker= [

// the 1st message-block starts here
{
message : "Yesterday, all my troubles seemed so far away", // comma required
linkto : "http://www.fabulant.com" // NO comma required
}, // comma required
// the 1st message-block ends here

// the 2nd message-block starts here
{
message : "Now it looks as though they're here to stay", // comma required
linkto : "http://www.fabulant.com" // NO comma required
}, // comma required
// the 2nd message-block ends here

// the 3th message-block starts here
{
message : "Oh I believe in yesterday", // comma required
linkto : "http://www.fabulant.com" // NO comma required
}, // comma required!!!!!!!!!!!!!!!!!!
// the 3th message-block ends here

// the 4th message-block starts here
{
message : "Suddenly, I'm not half the man I used to be", // comma required
linkto : "http://www.fabulant.com" // NO comma required
} // NO comma required!!!!!!!!!!!!!!!!!!
// the 4th message-block ends here

]

// Set the target of the your links ("_blank", "_top", "_self", "_parent" or "nameOfYourFrame")
var target_url="_blank"

// Set the width and height of your images (pixels)
var tickerwidth=400
var tickerheight=40

// Set the pause (standstill) between the rotations (seconds)
var pause=2

/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STOPS HERE
/////////////////////////////////////////////////

// do not edit below this line
var maxrotations=2
var step=36
var i_tickerwidth=0
var i_mssg=0
var i=0
var tmr
var maxdegree=maxrotations*360
pause*=1000

function enlarge() {
	i+=step
	i_tickerwidth+=tickerwidth/(360*maxrotations/step)
	if (i_tickerwidth>tickerwidth) {
		i_tickerwidth=tickerwidth
	}
	if (i<=maxdegree && !document.all) {
		document.getElementById("dt").innerHTML="<table cellpadding=0 cellspacing=0 width="+tickerwidth+" height="+tickerheight+"><tr><td class='boxstyle'><a href='"+ticker[i_mssg].linkto+"' target='"+target_url+"' class='linkstyle'>"+ticker[i_mssg].message+"</a></td></tr></table>"

document.getElementById("dt").style.MozTransform="rotate("+i+"deg)"
		document.getElementById("dt").style.WebkitTransform="rotate("+i+"deg)"
		document.getElementById("dt").style.OTransform="rotate("+i+"deg)"
		
		tmr=setTimeout("enlarge()",20)
	}
	else {
		document.getElementById("dt").style.MozTransform="rotate(0deg)"
		document.getElementById("dt").style.WebkitTransform="rotate(0deg)"
		document.getElementById("dt").style.OTransform="rotate(360deg)"
		document.getElementById("dt").innerHTML="<table cellpadding=0 cellspacing=0 width="+tickerwidth+" height="+tickerheight+"><tr><td class='boxstyle'><a href='"+ticker[i_mssg].linkto+"' target='"+target_url+"' class='linkstyle'>"+ticker[i_mssg].message+"</a></td></tr></table>"
		
		clearTimeout(tmr)
		i=0
		i_tickerwidth=0
		i_mssg++
		if (i_mssg>ticker.length-1) {
			i_mssg=0
		}
		tmr=setTimeout("enlarge()",pause)
	}
}

document.write("<div id='roof' style='position:relative;width:"+tickerwidth+"px;height:"+tickerheight+"px;'>")
if (document.all) {
	document.write("<div class='shodowboxie' id='dt' style='width:"+tickerwidth+"px;height:"+tickerheight+"px;background-color:white;'></div>")
}
else {
	document.write("<div class='rotatebox' id='dt' style='width:"+tickerwidth+"px;height:"+tickerheight+"px;background-color:white;'></div>")
}
document.write("</div>")

window.onload=enlarge
</script>

Step 2: Go inside the <style>-tags and configure the style of the text and box

Step 3: Go to the lines below the <script>-tag and configure the messages and links as well as the width and height of the message Propeller.