Java - Text Animations

**paralinx** · Dec 24th, 2005, 09:27 AM

Here are some of my favorite Text Animations in JavaScript. Note that all of the code was found at www.DynamicDrive.com, so that is where the credit is given to. Here are the different types of Animations.

Trembling Message
Matrix Text Message
Bouncy Message
3d Spinning Message
Neon Lights Message
Roller Coaster Message
Glowing Message
Pulsating Message

**paralinx** · Dec 24th, 2005, 09:30 AM

HTML Code:

<Head>
<style>
.jc{
position:relative;
}
</style>

<script language="JavaScript1.2">

//Trembling message script- © Dynamic Drive ([url]www.dynamicdrive.com[/url])
//For full source code, 100's more DHTML scripts, and TOS,
//visit [url]http://www.dynamicdrive.com[/url]

var ns6=document.getElementById&&!document.all
var ie=document.all

var customcollect=new Array()
var i=0

function jiggleit(num){
if ((!document.all&&!document.getElementById)) return;
customcollect[num].style.left=(parseInt(customcollect[num].style.left)==-1)? customcollect[num].style.left=1 : customcollect[num].style.left=-1
}

function init(){
if (ie){
while (eval("document.all.jiggle"+i)!=null){
customcollect[i]= eval("document.all.jiggle"+i)
i++
} 
}
else if (ns6){
while (document.getElementById("jiggle"+i)!=null){
customcollect[i]= document.getElementById("jiggle"+i)
i++
}
}

if (customcollect.length==1)
setInterval("jiggleit(0)",80)
else if (customcollect.length>1)
for (y=0;y<customcollect.length;y++){
var tempvariable='setInterval("jiggleit('+y+')",'+'100)'
eval(tempvariable)
}
}

window.onload=init

</script>
</Head>

//To call Tremble Effect
<span id="jiggle0" class="jc">Trembling Text!</span>

**paralinx** · Dec 24th, 2005, 09:33 AM

HTML Code:

<Head>
<style type="text/css">
.matrix { font-family:Lucida Console, Courier, Monotype; font-size:10pt; text-align:center; width:10px; padding:0px; margin:0px;}
</style>

<script type="text/javascript" language="JavaScript">

<!--
var rows=11; // must be an odd number
var speed=50; // lower is faster
var reveal=2; // between 0 and 2 only. The higher, the faster the word appears
var effectalign="default" //enter "center" to center it.

/***********************************************
* The Matrix Text Effect- by Richard Womersley ([url]http://www.mf2fm.co.uk/rv[/url])
* This notice must stay intact for use
* Visit [url]http://www.dynamicdrive.com/[/url] for full source code
***********************************************/

var w3c=document.getElementById && !window.opera;;
var ie45=document.all && !window.opera;
var ma_tab, matemp, ma_bod, ma_row, x, y, columns, ma_txt, ma_cho;
var m_coch=new Array();
var m_copo=new Array();
window.onload=function() {
	if (!w3c && !ie45) return
  var matrix=(w3c)?document.getElementById("matrix"):document.all["matrix"];
  ma_txt=(w3c)?matrix.firstChild.nodeValue:matrix.innerHTML;
  ma_txt=" "+ma_txt+" ";
  columns=ma_txt.length;
  if (w3c) {
    while (matrix.childNodes.length) matrix.removeChild(matrix.childNodes[0]);
    ma_tab=document.createElement("table");
    ma_tab.setAttribute("border", 0);
    ma_tab.setAttribute("align", effectalign);
    ma_tab.style.backgroundColor="#000000";
    ma_bod=document.createElement("tbody");
    for (x=0; x<rows; x++) {
      ma_row=document.createElement("tr");
      for (y=0; y<columns; y++) {
        matemp=document.createElement("td");
        matemp.setAttribute("id", "Mx"+x+"y"+y);
        matemp.className="matrix";
        matemp.appendChild(document.createTextNode(String.fromCharCode(160)));
        ma_row.appendChild(matemp);
      }
      ma_bod.appendChild(ma_row);
    }
    ma_tab.appendChild(ma_bod);
    matrix.appendChild(ma_tab);
  } else {
    ma_tab='<ta'+'ble align="'+effectalign+'" border="0" style="background-color:#000000">';
    for (var x=0; x<rows; x++) {
      ma_tab+='<t'+'r>';
      for (var y=0; y<columns; y++) {
        ma_tab+='<t'+'d class="matrix" id="Mx'+x+'y'+y+'">&nbsp;</'+'td>';
      }
      ma_tab+='</'+'tr>';
    }
    ma_tab+='</'+'table>';
    matrix.innerHTML=ma_tab;
  }
  ma_cho=ma_txt;
  for (x=0; x<columns; x++) {
    ma_cho+=String.fromCharCode(32+Math.floor(Math.random()*94));
    m_copo[x]=0;
  }
  ma_bod=setInterval("mytricks()", speed);
}

function mytricks() {
  x=0;
  for (y=0; y<columns; y++) {
    x=x+(m_copo[y]==100);
    ma_row=m_copo[y]%100;
    if (ma_row && m_copo[y]<100) {
      if (ma_row<rows+1) {
        if (w3c) {
          matemp=document.getElementById("Mx"+(ma_row-1)+"y"+y);
          matemp.firstChild.nodeValue=m_coch[y];
        }
        else {
          matemp=document.all["Mx"+(ma_row-1)+"y"+y];
          matemp.innerHTML=m_coch[y];
        }
        matemp.style.color="#33ff66";
        matemp.style.fontWeight="bold";
      }
      if (ma_row>1 && ma_row<rows+2) {
        matemp=(w3c)?document.getElementById("Mx"+(ma_row-2)+"y"+y):document.all["Mx"+(ma_row-2)+"y"+y];
        matemp.style.fontWeight="normal";
        matemp.style.color="#00ff00";
      }
      if (ma_row>2) {
          matemp=(w3c)?document.getElementById("Mx"+(ma_row-3)+"y"+y):document.all["Mx"+(ma_row-3)+"y"+y];
        matemp.style.color="#009900";
      }
      if (ma_row<Math.floor(rows/2)+1) m_copo[y]++;
      else if (ma_row==Math.floor(rows/2)+1 && m_coch[y]==ma_txt.charAt(y)) zoomer(y);
      else if (ma_row<rows+2) m_copo[y]++;
      else if (m_copo[y]<100) m_copo[y]=0;
    }
    else if (Math.random()>0.9 && m_copo[y]<100) {
      m_coch[y]=ma_cho.charAt(Math.floor(Math.random()*ma_cho.length));
      m_copo[y]++;
    }
  }
  if (x==columns) clearInterval(ma_bod);
}

function zoomer(ycol) {
  var mtmp, mtem, ytmp;
  if (m_copo[ycol]==Math.floor(rows/2)+1) {
    for (ytmp=0; ytmp<rows; ytmp++) {
      if (w3c) {
        mtmp=document.getElementById("Mx"+ytmp+"y"+ycol);
        mtmp.firstChild.nodeValue=m_coch[ycol];
      }
      else {
        mtmp=document.all["Mx"+ytmp+"y"+ycol];
        mtmp.innerHTML=m_coch[ycol];
      }
      mtmp.style.color="#33ff66";
      mtmp.style.fontWeight="bold";
    }
    if (Math.random()<reveal) {
      mtmp=ma_cho.indexOf(ma_txt.charAt(ycol));
      ma_cho=ma_cho.substring(0, mtmp)+ma_cho.substring(mtmp+1, ma_cho.length);
    }
    if (Math.random()<reveal-1) ma_cho=ma_cho.substring(0, ma_cho.length-1);
    m_copo[ycol]+=199;
    setTimeout("zoomer("+ycol+")", speed);
  }
  else if (m_copo[ycol]>200) {
    if (w3c) {
      mtmp=document.getElementById("Mx"+(m_copo[ycol]-201)+"y"+ycol);
      mtem=document.getElementById("Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol);
    }
    else {
      mtmp=document.all["Mx"+(m_copo[ycol]-201)+"y"+ycol];
      mtem=document.all["Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol];
    }
    mtmp.style.fontWeight="normal";
    mtem.style.fontWeight="normal";
    setTimeout("zoomer("+ycol+")", speed);
  }
  else if (m_copo[ycol]==200) m_copo[ycol]=100+Math.floor(rows/2);
  if (m_copo[ycol]>100 && m_copo[ycol]<200) {
    if (w3c) {
      mtmp=document.getElementById("Mx"+(m_copo[ycol]-101)+"y"+ycol);
      mtmp.firstChild.nodeValue=String.fromCharCode(160);
      mtem=document.getElementById("Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol);
      mtem.firstChild.nodeValue=String.fromCharCode(160);
    }
    else {
      mtmp=document.all["Mx"+(m_copo[ycol]-101)+"y"+ycol];
      mtmp.innerHTML=String.fromCharCode(160);
      mtem=document.all["Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol];
      mtem.innerHTML=String.fromCharCode(160);
    }
    setTimeout("zoomer("+ycol+")", speed);
  }
}
// -->
</script>
</Head>

//To Call Matrix Effect
<div id="matrix">Matrix Effect!</div>

**paralinx** · Dec 24th, 2005, 09:34 AM

HTML Code:

<Body>
<style type="text/css">

#supertext {
position:absolute;
left:0;
top:0;
visibility:hide;
visibility:hidden;

}

</style>


<script language="JavaScript1.2">

/*
Bouncy message script- By Dynamicdrive.com
Code based on Lloyd Hassell's, at [url]http://www.dynamicdrive.com/dynamicindex4/bounceimage.htm[/url]
For full source, TOS, and 100s DTHML scripts, visit [url]http://dynamicdrive.com[/url]
*/

//Configure the below three variables

//1) Set message to display (HTML accepted)
var thecontent='<h2><font color="#0000FF">Welcome to Dynamic Drive!</font></h2>'
//2) Set delay after which message should be hidden, in miliseconds ('' makes it incessantly visible on the screen)
var hidetimer='';
//3) Set speed of animation (1-50), where larger is faster
var BallSpeed = 20;



///NO NEED TO EDIT BELOW THIS LINE///////////

var contentWidth;
var contentHeight;
var maxBallSpeed = 50;


var xMax;
var yMax;
var xPos = 0;
var yPos = 0;
var xDir = 'right';
var yDir = 'down';
var superballRunning = true;
var tempBallSpeed;
var currentBallSrc;
var newXDir;
var newYDir;

function initializeBall() {
   if (document.all) {
      xMax = document.body.clientWidth
      yMax = document.body.clientHeight
      document.all("supertext").style.visibility = "visible";
      contentWidth=supertext.offsetWidth
      contentHeight=supertext.offsetHeight
      }
   else if (document.layers) {
      xMax = window.innerWidth;
      yMax = window.innerHeight;
      contentWidth=document.supertext.document.width
      contentHeight=document.supertext.document.height
      document.layers["supertext"].visibility = "show";
      }
   setTimeout('moveBall()',400);
   if (hidetimer!='')
   setTimeout("hidetext()",hidetimer)
   }

function moveBall() {
   if (superballRunning == true) {
      calculatePosition();
      if (document.all) {
         document.all("supertext").style.left = xPos + document.body.scrollLeft;
         document.all("supertext").style.top = yPos + document.body.scrollTop;
         }
      else if (document.layers) {
         document.layers["supertext"].left = xPos + pageXOffset;
         document.layers["supertext"].top = yPos + pageYOffset;
         }
      animatetext=setTimeout('moveBall()',20);
      }
   }

function calculatePosition() {
   if (xDir == "right") {
      if (xPos > (xMax - contentWidth - BallSpeed)) { 
         xDir = "left";
         }
      }
   else if (xDir == "left") {
      if (xPos < (0 + BallSpeed)) {
         xDir = "right";
         }
      }
   if (yDir == "down") {
      if (yPos > (yMax - contentHeight - BallSpeed)) {
         yDir = "up";
         }
      }
   else if (yDir == "up") {
      if (yPos < (0 + BallSpeed)) {
         yDir = "down";
         }
      }
   if (xDir == "right") {
      xPos = xPos + BallSpeed;
      }
   else if (xDir == "left") {
      xPos = xPos - BallSpeed;
      }
   else {
      xPos = xPos;
      }
   if (yDir == "down") {
      yPos = yPos + BallSpeed;
      }
   else if (yDir == "up") {
      yPos = yPos - BallSpeed;
      }
   else {
      yPos = yPos;
      }
   }

function hidetext(){
if (document.all)
supertext.style.visibility="hidden"
else if (document.layers)
document.supertext.visibility="hide"
clearTimeout(animatetext)
}

if (document.all||document.layers){
document.write('<span id="supertext"><nobr>'+thecontent+'</nobr></span>')
window.onload = initializeBall;
window.onresize = new Function("window.location.reload()");
}

</script>
</Body>

**paralinx** · Dec 24th, 2005, 09:37 AM

HTML Code:

<Head>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<style type="text/css">
v\:* { behavior: url(#default#VML); }
</style>
</Head>

//This code must not be in any container tags such as <div> or <table>
<Body>
<script type="text/javascript">

/***********************************************
* 3D Spinning Message Script- By Copyright (c) 2003 Peter Gehrig
* Website: [url]http://www.24fun.com[/url]
* Script available at/modified by Dynamic Drive ([url]http://www.dynamicdrive.com[/url])
* This notice must stay intact for use
***********************************************/


// Add as many messages as you like
var message=new Array("Dynamic Drive", "#1 DHTML site online", "Visit us for free scripts", "Enjoy")

// Set the outline-color. Add as many colors as you like
var outlinecolor=new Array("black", "black")

// Set fillcolors 1. Add as many colors as you like
var fillcolor1=new Array("gray", "green", "white", "green")

// Set fillcolors 2. Add as many colors as you like
var fillcolor2=new Array("blue", "olive", "black", "lime")

// Set the letter marking the circle
var circlemark=new Array("-")

// Set the width of the outline
var strkweight=2

// Set the waiting time between the messages (seconds)
var pause=2

// Set the strength of the opacity (transparency of letters)
var strengthopacity="60%"

// Set the size of the circle (values range from 0.1 to 1)
var circlesize=0.5

// Always keep messages in view even if page is scrolled? (DD added option)
var keepinview="yes"

// Do not edit below this line

mytruebody=(!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body //Dynamicdrive added object

var outerwidth=mytruebody.clientWidth
var outerheight=mytruebody.clientHeight

var innerwidth=Math.floor(circlesize*outerwidth)
var innerheight=Math.floor(circlesize*outerheight)

var posleft=(outerwidth-innerwidth)/2
var postop=(outerheight-innerheight)/2

var path=new Array()
var i_message=0
var i_outlinecolor=0
var i_fillcolor1=0
var i_fillcolor2=0
var i_messagelength=0
var longestmessage=0
pause*=1000

var ie=document.getElementById&&document.all?1:0 

for (i=0;i<=message.length-1;i++) {
	if (message[i].length>longestmessage) {
		longestmessage=message[i].length
	}
	longestmessage+=4
}

for (i=0;i<=message.length-1;i++) {

	var emptyspace=""
	var i_emptyspace=(longestmessage-message[i].length)/2
	for (ii=0;ii<=i_emptyspace;ii++) {
		emptyspace+=circlemark
	}
	message[i]=emptyspace+" "+message[i]+" "+emptyspace
}

function changeform() {
	if (keepinview=="yes") //DD added
	document.getElementById("roofid").style.top=mytruebody.scrollTop //DD added
	if (i_outlinecolor >= outlinecolor.length) {i_outlinecolor=0}
	if (i_fillcolor1 >= fillcolor1.length) {i_fillcolor1=0}
	if (i_fillcolor2 >= fillcolor2.length) {i_fillcolor2=0}
	document.getElementById('strokeid').color=outlinecolor[i_outlinecolor]
	document.getElementById('fillid').color=fillcolor1[i_fillcolor1]
	document.getElementById('fillid').color2=fillcolor2[i_fillcolor2]
	if (i_message < message.length) {tick()}
	else {document.getElementById('textpathid').string=""
	document.getElementById("roofid").style.display="none" //DD added
	}
}

function tick() {
	if (i_messagelength <= message[i_message].length) {
		var messagestringend=""
		var messagestring=message[i_message].substring(0, i_messagelength)+messagestringend
		document.getElementById('textpathid').string=messagestring
		var timer=setTimeout("tick()",50)
		i_messagelength++
	}
	else {
		clearTimeout(timer)
		i_messagelength=0
		i_message++
		i_outlinecolor++	
		i_fillcolor1++	
		i_fillcolor2++	
		var timer=setTimeout("changeform()",pause)
	}
	
}

if (ie) {
	document.write('<div id="roofid" style="position:absolute;left:0px;top:0px;width:'+outerwidth+'px;height:'+outerheight+'px;overflow:hidden;">')
	document.write('<v:oval id="tc" style="position:absolute;top:'+postop+'px;left:'+posleft+'px;width:'+innerwidth+'px;height:'+innerheight+'px">')
	document.write('<v:shadow on="t" opacity="'+strengthopacity+'"/>')
	document.write('<v:stroke id="strokeid" weight="'+strkweight+'pt" color="blue"/>')
	document.write('<v:fill id="fillid" on="True" color="'+fillcolor1[0]+'" color2="'+fillcolor2[0]+'" opacity="'+strengthopacity+'" opacity2="'+strengthopacity+'" type="gradient"/>')
	document.write('<v:path textpathok="t"/>')
	document.write('<v:textpath id="textpathid" on="t" id="mytp" style="font-family:\'Arial Black\'; " fitpath="t" string=""/>')
	document.write('</v:oval></div>')
	if (window.attachEvent) //DD added code
	window.attachEvent("onload", changeform) //DD added code
	else
	window.onload=changeform
}
</script>
</Body>

**paralinx** · Dec 24th, 2005, 09:39 AM

HTML Code:

//Set Neon Text in Header as example, you can place it anywhere you want it to be
<h1>
<script language="JavaScript1.2">

/*
Neon Lights Text
By JavaScript Kit ([url]http://javascriptkit.com[/url])
For this script, TOS, and 100s more DHTML scripts,
Visit [url]http://www.dynamicdrive.com[/url]
*/

var message="Welcome to Dynamic Drive!"
var neonbasecolor="gray"
var neontextcolor="yellow"
var flashspeed=100  //in milliseconds

///No need to edit below this line/////

var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)

function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}

function neon(){

//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
//eval("document.all.neonlight"+m).style.color=neonbasecolor
crossref(m).style.color=neonbasecolor
}

//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor

if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",1500)
return
}
}

function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()


</script>
</h1>

Thread: Java - Text Animations

Thread Tools

Display

Hybrid View

Java - Text Animations

Text Animations - Trembling Text

Text Animations - Matrix Text Effect

Text Animations - Bouncy Message

Text Animations - 3d Spinning Message

Text Animations - Neon Lights Message

Posting Permissions