« »

Flip-Color-Scroller 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. No images needed. Easy 1-minute-configuration of speed, font, font-size, colors, tickersize and number of lamellas.

Label: Flip-Color-Scroller with unique lamellar effect

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
HTML
Print

Copy All x2

<style>
A {
	text-decoration:none;
}
.s {
	position:absolute;
    left:-5000px;
	topt:-5000px;
}
</style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<script>
<!-- Beginning of JavaScript -
// Flip-Color-Scroller with unique lamellar effect

// your messages. Add as many messages a you like.
var message = new Array()
message[0]="GET A FREE WEB POLL NOW"
message[1]="FIND LOVE & REALTIONSHIPS"
message[2]="DISCOVER ALTERNATIVE MEDICINE"
message[3]="AND BE HAPPY DO NOT WORRY"

// links for your messages. You need as many links as as messages.
// If you don't want to link a message write '#' instead of an URL (see last sample)
var messageurl = new Array()
messageurl[0]="http://javascriptbank.com"
messageurl[1]="http://javascriptbank.com"
messageurl[2]="http://javascriptbank.com"
messageurl[3]="http://javascriptbank.com"

// target of the message-links (HTML conventions)
var target_url="_blank"
	
// width of scroller
var textwidth=240

// height of scroller
var textheight=100

// borderwidth of scroller
var borderwidth=2

// size of the font (HTML conventions)
var font_size=5

// font
var font_face="Verdana"

// horizontal position of the scroller (distance to the left margin of the window)
var horizontal_pos=10

// vertical position of the scroller (distance to the top margin of the window)
var vertical_pos=10

// number of lamellas.
var x_slices=12

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

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

// - End of JavaScript - -->

</script>
<script>
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()
    if (document.all) {
	    for (i=0;i<=x_slices;i++) {
            var thisinners=eval("s"+i)
            thisinners.innerHTML=content
            var thiss=eval("document.all.s"+i+".style")
            thiss.posLeft=horizontal_pos
            thiss.posTop=vertical_pos
        }
		
		document.all.whole.style.posLeft=horizontal_pos
		document.all.whole.style.posTop=vertical_pos
	    i_message++
	    openlamellar()
    }
	if (document.layers) {
	    for (i=0;i<=x_slices;i++) {
            var thisinners=eval("document.s"+i+".document")
            thisinners.write(content)
			thisinners.close()
            var thiss=eval("document.s"+i)
            thiss.left=horizontal_pos
            thiss.top=vertical_pos
        }
		document.whole.document.write(" ")
		document.whole.document.close()
		document.whole.left=horizontal_pos
		document.whole.top=vertical_pos
	    i_message++
	    openlamellarNN()
    }
}

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

function openlamellarNN() {
	clipleft=-width_slice
	clipright=0
    if (i_clipright<=width_slice) {
        for (i=0;i<=x_slices;i++) {
            var thiss=eval("document.s"+i)
			thiss.clip.left=clipleft
        	thiss.clip.right=clipright
        	thiss.clip.top=cliptop
        	thiss.clip.bottom=clipbottom
            clipleft+=width_slice
            clipright=clipleft+i_clipright
		}
    i_clipright++
    var timer=setTimeout("openlamellarNN()",20)
   }
   	else {
		clearTimeout(timer)
		document.whole.document.write(content)
		document.whole.document.close()
		var timer=setTimeout("changemessageNN()",2000)
	}
}


function getcontent() {
    content="<table border="+borderwidth+" cellpadding='3' width="+textwidth+" height="+textheight+">"
    content+="<tr><td bgcolor="+bg_ticker[i_color]+" align='center'>"
    content+="<a href="+messageurl[i_message]+" target="+target_url+">"
    content+="<font face="+font_face+" size="+font_size+" color="+font_color[i_color]+">"
    content+=message[i_message]
    content+="</font></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.all.s"+i+".style")
    	thiss.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
	}
	if (i_message>message.length-1) {i_message=0}
	getcontent()

	for (i=0;i<=x_slices;i++) {
        var thisinners=eval("s"+i)
        thisinners.innerHTML=content   
    }
	i_message++
	openlamellar()
}

function changemessageNN() {
	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.s"+i)
			thiss.clip.left=clipleft
        	thiss.clip.right=clipright
        	thiss.clip.top=cliptop
        	thiss.clip.bottom=clipbottom
            clipleft+=width_slice
            clipright=clipleft+i_clipright
	}
	if (i_message>message.length-1) {i_message=0}
	getcontent()
	for (i=0;i<=x_slices;i++) {
        var thisinners=eval("document.s"+i+".document")
        thisinners.write(content)
		thisinners.close()
    }
	i_message++
	openlamellarNN()
}

document.write("<span id='whole' class='s'></span>")
for (i=0;i<=x_slices;i++) {
 	document.write("<span id='s"+i+"' class='s'></span>")
}
document.close()
window.onload=initiate
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->