Fun of JavaScript: Flip-Color-Textboard

» 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

Flip-color-textboard with unique transition effect
This free copy and paste flip-color-textboard creates a dynamic lamellar transition effect between the messages. You may add as many messages and lamellas as you like. Each message can be linked to a separate URL. Most style-attributes can be set by CSS. No images needed. Copy and paste installation. Easy 1-minute-configuration of font, font-size, colors, size and number of lamellas. Crossbrowser. Internet Explorer 5x/6x/7x/8x/9x, Firefox 2x/3x/4x, Opera 6x/7x/8x/9x/10x/11x, Google Chrome 3x/4x/5x/6x/7x/8x/9x/10x.

Configuration:

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

<style>
.textstyle{
	/* style attributes for the text */
	/* ATTENTION: font-color and background-color must be set within the script */
	font-family:Arial;
	font-size:10pt;
	padding:5px;
	text-decoration:none;
	font-weight:bold;
}

.textboxstyle{
	/* style attributes for the text-box */
	/* ATTENTION: width and height must be set within the script */
	overflow:hidden;
	border-style:solid;
	border-width:1px;
	border-color:white;
	
	/* shadow for Firefox */
	-moz-box-shadow: 5px 5px 8px #AAAAAA;

/* shadow for Safari and Chrome */
	-webkit-box-shadow: 5px 5px 8px #AAAAAA;

/* shadow for Opera */
	box-shadow: 5px 5px 5px #AAAAAA;

/* shadow for Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#AAAAAA');
}
</style>

// CREDITS:
// Flip-Color-Board with lamellar effect
// by Peter Gehrig 
// Copyright (c) 2011 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

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

var message= [

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

// Set your messages and the corresponding links below
// Add as many links as you like
{
text : "DOWNLOAD FREE FUN SCRIPTS NOW",
linkto : "http://www.fabulant.com"
}, // commra required

{
text : "CREATE GREAT JAVASCRIPT ANIMATIONS",
linkto : "http://www.fabulant.com"
}, // comma required

{
text : "PIMP YOUR SITE WITH HOT SLIDESHOWS",
linkto : "http://www.fabulant.com"
}, // comma required

{
text : "BE HAPPY DONT WORRY",
linkto : "http://www.fabulant.com"
} // comma NOT required

]

// target of the message-link. 
// Allowed values are "_top", "_blank", "_parent", "_self" or the name of your frame
var target_url="_blank"
	
// width of scroller (pixels)
var textwidth=400

// height of scroller (pixels)
var textheight=42

// number of lamellas.
var x_slices=20

// two colors (required for the color-flip-effect)
var color1="#FFFF00"
var color2="red"

// pause beween the messages (seconds)
var pause=2

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

// do not edit below this line

var horizontal_pos=0
var vertical_pos=0
var i_loop=0
var i_message=0
var width_slice=Math.ceil(textwidth/x_slices)
var cliptop=0
var clipbottom=textheight
var i_clipright=1
var content=""
var bg_ticker=new Array(color1,color2)
var font_color=new Array(color2,color1)
var i_color=0
pause=pause*1000

function initiate() {
	getcontent()
	for (i=0;i<=x_slices;i++) {
		document.getElementById("s"+i).innerHTML=content
		var thiss=eval("document.getElementById('s"+i+"').style")
		thiss.left=0+"px"
		thiss.top=0+"px"
  	}	
	document.getElementById("whole").style.left=horizontal_pos+"px"
	document.getElementById("whole").style.top=vertical_pos+"px"
	i_message++
	openlamellar()
}

function openlamellar() {
	clipleft=-width_slice
	clipright=0
    if (i_clipright<=width_slice) {
        for (i=0;i<=x_slices;i++) {
            var thiss=eval("document.getElementById('s"+i+"').style")
            thiss.clip ="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
            clipleft+=width_slice
            clipright=clipleft+i_clipright
		}
    i_clipright++
    var timer=setTimeout("openlamellar()",30)
   	}
   	else {
		clearTimeout(timer)
		document.getElementById("whole").innerHTML=content
		var timer=setTimeout("changemessage()",pause)
	}
}

function getcontent() {
    content="<table cellpadding=0 cellspacing=0 width="+textwidth+" height="+textheight+">"
    content+="<tr valign=middle><td bgcolor="+bg_ticker[i_color]+" align='center'>"
    content+="<a href='"+message[i_message].linkto+"' class='textstyle' style='color:"+font_color[i_color]+";' target="+target_url+">"
    content+=message[i_message].text
    content+="</a></td></tr></table>"
}

function changemessage() {
	i_color++
	if (i_color>1) {i_color=0}
	i_clipright=0
	clipleft=0
	clipright=0
	for (i=0;i<=x_slices;i++) {
        var thiss=eval("document.getElementById('s"+i+"').style")
    	thiss.clip ="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
	}
	if (i_message>message.length-1) {i_message=0}
	getcontent()

for (i=0;i<=x_slices;i++) {
        document.getElementById("s"+i).innerHTML=content   
    }
	i_message++
	openlamellar()
}

document.write("<div class='textboxstyle' style='position:relative;width:"+textwidth+"px;height:"+textheight+"px;'>")
document.write("<span id='whole' style='position:absolute;'></span>")
for (i=0;i<=x_slices;i++) {
 	document.write("<span id='s"+i+"' style='position:absolute;'></span>")
}
document.write("</div>")

window.onload=initiate

// - End of JavaScript - -->
</script>

Step 2: Go on top of the script and configure messages, links and style.