CSS-controlled animations: stretch ticker

» 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

CSS-controlled animations: stretch ticker
What's so special about this text ticker? Each frame of the animation can be controlled and defined by CSS. The principle is quite simple: Each CSS-class acts like a frame in a movie. JavaScript has only two jobs to do: connecting the CSS-frames into an animation and changing the messages. That's it. The advanatges: less JavaScript code, less bugs, much more style-control. The ticker works with Internet Explorer 5x/6x/7x/8x/9x, Firefox 2x/3x, Opera 8x/9x/10x/11x, Google Chrome 3x/4x/5x/6x/7x/8x/9x.

Configuration:

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

<style>
#stage  {
/* #stage should contain all style-attributes that remain unchanged during the animation */
/* Do not change the name of #stage!!! */
	font-family:Arial;
	font-size:14pt;
	background:#ff0000;
	width:400px;
	text-align: center;
	vertical-align:middle;
	border: 2px solid #ffdddd;
	overflow:hidden;
	padding:5px;
	cursor: pointer;

/* shadow for Firefox */
	-moz-box-shadow: 5px 5px 5px #ffaaaa;
	/* shadow for Chrome and Safari */
	-webkit-box-shadow: 5px 5px 5px #ffaaaa;
	/* shadow for Opera */
	box-shadow: 5px 5px 5px #ffaaaa;
	/* shadow for Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#ffaaaa');
	
	/* rounded corners for Firefox */
	-moz-border-radius-topleft: 15px;
	-moz-border-radius-bottomright: 15px;
	
	/* rounded corners for Chrome and Safari */
	-webkit-border-top-left-radius: 15px;
	-webkit-border-bottom-right-radius: 15px;
	
	/* rounded corners for Opera */
	border-top-left-radius: 15px;
	border-bottom-right-radius: 15px;
}

/* Below are the classes describing the changes of style-attributes during the animation */
/* Each class acts like a frame in a movie */
/* You may add as many classes as you like */
/* You may name the classes as you like. In this samplae I named them a, b, c ... and so on */
/* In this sample I changed 2 attributes: the width between the letters and the color */
/* You may change other attributes. It's up to you! */
.a {
   color:#ff2222;
   letter-spacing:40px;
}
.b {
   color:#ff2222;
   letter-spacing:38px;
}
.c {
   color:#ff2222;
   letter-spacing:36px;
}
.d {
   color:#ff3333;
   letter-spacing:34px;
}
.e {
   color:#ff4444;
   letter-spacing:32px;
}
.f {
   color:#ff5555;
   letter-spacing:30px;
}
.g {
   color:#ff6666;
   letter-spacing:28px;
}
.h {
   color:#ff7777;
   letter-spacing:26px;
}
.i {
   color:#ff8888;
   letter-spacing:24px;
}
.k {
   color:#ff9999;
   letter-spacing:22px;
}
.l {
   color:#ffaaaa;
   letter-spacing:20px;
}
.m {
   color:#ffbbbb;
   letter-spacing:17px;
}
.n {
   color:#ffcccc;
   letter-spacing:14px;
}
.o {
   color:#ffdddd;
   letter-spacing:10px;
}
.p {
   color:#ffeeee;
   letter-spacing:5px;
}
.q {
   color:#ffffff;
   letter-spacing:0px;
}
</style>

// 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
/////////////////////////////////////////////////

// The array 'classes_pull_together_animation' contains the 'frames' required for the pull-together-animation
// Enter the class-names. The order is up to you
// In this sample class 'a' will be played first, then class 'b', then class 'c' an so on
var classes_pull_together_animation=new Array("a","b","c","d","e","f","g","h","i","k","l","m","n","o","p","q")

// The array 'classes_stretch_animation' contains the 'frames' required for the stretch-animation
// Enter the class-names. The order is up to you
// In this sample class 'q' will be played first, then class 'p', then class 'n' an so on
var classes_stretch_animation=new Array("q","p","n","m","l","k","i","h","g","f","f","e","e","d","c","b","a")

// Set the messages. You may add as many messages as you like
var message=new Array()
message[0]="Hello Friends!"
message[1]="What's up today?"
message[2]="Ready to get it all?"

// Set a link for each message. You may add as many messages as you like
// If you don't want to add a link enter a "#" instead of the URL. See sample below
var messagelink=new Array()
messagelink[0]="http://www.hotscripts.com"
messagelink[1]="#"
messagelink[2]="http://www.hotscripts.com"

// Set the speed of the animation from class to class (frame to frame). High values = slow speed
var speed=40

// Set the standstill-time of message (seconds)
var pause=2

/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION ENDS HERE
/////////////////////////////////////////////////

// do not edit below this line
var i_classnames=0
var i_message=0;
var i_messagelink=0;
var tmr
pause*=1000

var spc="\&"+"nbsp;"

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

function setcontent() {
	i_messagelink=i_message
	if (i_message>=message.length) {
		i_message=0
	}
	if (i_messagelink>=message.length) {
		i_messagelink=0
	}
	document.getElementById("stage").innerHTML=message[i_message]
	i_message++
	i_classnames=0
	pull_together()
}

function pull_together() {
	if (i_classnames<=classes_pull_together_animation.length-1) {	
		document.getElementById("stage").className=classes_pull_together_animation[i_classnames]
		i_classnames++
		tmr=setTimeout("pull_together()",speed)
	}
	else {
		clearTimeout(tmr);
		i_classnames=0
		setTimeout("stretch()",pause)
	}
}

function stretch() {
	if (i_classnames<=classes_stretch_animation.length-1) {	
		document.getElementById("stage").className=classes_stretch_animation[i_classnames]
		i_classnames++
		tmr=setTimeout("stretch()",speed)
	}
	else {
		clearTimeout(tmr);
		i_classnames=0
		setTimeout("setcontent()",500)
	}
}

function gotourl() {
	document.location.href=messagelink[i_messagelink]
}

window.onload=setcontent

</script>

Step 2: Go inside the <style>-tags and configure the style according to the instructions

Step 3: Go into the <script>-code and configure the messages, links and speed.