Results 1 to 9 of 9

Thread: Java - Text Animations

  1. #1

    Thread Starter
    Fanatic Member paralinx's Avatar
    Join Date
    Jun 2005
    Location
    Michigan
    Posts
    987

    Java - Text Animations

    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
    Last edited by paralinx; Dec 24th, 2005 at 09:48 AM.

  2. #2

    Thread Starter
    Fanatic Member paralinx's Avatar
    Join Date
    Jun 2005
    Location
    Michigan
    Posts
    987

    Text Animations - Trembling Text

    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>
    Last edited by paralinx; Dec 24th, 2005 at 09:35 AM.

  3. #3

    Thread Starter
    Fanatic Member paralinx's Avatar
    Join Date
    Jun 2005
    Location
    Michigan
    Posts
    987

    Text Animations - Matrix Text Effect

    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>

  4. #4

    Thread Starter
    Fanatic Member paralinx's Avatar
    Join Date
    Jun 2005
    Location
    Michigan
    Posts
    987

    Text Animations - Bouncy Message

    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>

  5. #5

    Thread Starter
    Fanatic Member paralinx's Avatar
    Join Date
    Jun 2005
    Location
    Michigan
    Posts
    987

    Text Animations - 3d Spinning Message

    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>

  6. #6

    Thread Starter
    Fanatic Member paralinx's Avatar
    Join Date
    Jun 2005
    Location
    Michigan
    Posts
    987

    Text Animations - Neon Lights Message

    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>

  7. #7

    Thread Starter
    Fanatic Member paralinx's Avatar
    Join Date
    Jun 2005
    Location
    Michigan
    Posts
    987

    Text Animations - Roller Coaster Message

    HTML Code:
    //Place This script where you want roller coaster text to appear
    <script language="JavaScript">
    
    
    /*
    script edited by David Gardner (toolmandav@geocities.com)
    Permission granted to Dynamicdrive.com to feature the script
    For more DHTML scripts, visit Dynamicdrive.com
    */
    
    //put your text here
    var theText = "David Gardner";
    
    function nextSize(i,incMethod,textLength)
    {
    if (incMethod == 1) return (72*Math.abs( Math.sin(i/(textLength/3.14))) );
    if (incMethod == 2) return (255*Math.abs( Math.cos(i/(textLength/3.14))));
    }
    
    function sizeCycle(text,method,dis)
    {
    	output = "";
    	for (i = 0; i < text.length; i++)
    	{
    		size = parseInt(nextSize(i +dis,method,text.length));
    		output += "<font style='font-size: "+ size +"pt'>" +text.substring(i,i+1)+ "</font>";
    	}
    	theDiv.innerHTML = output;
    }
    
    function doWave(n) 
    {   
    	sizeCycle(theText,1,n);
    	if (n > theText.length) {n=0}
    	setTimeout("doWave(" + (n+1) + ")", 50);
    }
    </script>
    <div ID="theDiv" align="center">
    
    </div>
    
    //Starts the Coaster Text when document loads
    <body onload="doWave(0)">

  8. #8

    Thread Starter
    Fanatic Member paralinx's Avatar
    Join Date
    Jun 2005
    Location
    Michigan
    Posts
    987

    Text Animations - Glowing Message

    HTML Code:
    <Head>
    <style>
    <!--
    #glowtext{
    filter:glow(color=FFFF00,strength=3);
    width:100%;
    }
    -->
    </style>
    
    <script language="JavaScript1.2">
    
    /*
    Glowing Text Script- 
    © Dynamic Drive ([url]www.dynamicdrive.com[/url])
    For full source code, installation instructions,
    100's more DHTML scripts, and Terms Of
    Use, visit dynamicdrive.com
    */
    
    function glowit(which){
    if (document.all.glowtext[which].filters[0].strength==3)
    document.all.glowtext[which].filters[0].strength=2
    else
    document.all.glowtext[which].filters[0].strength=3
    }
    
    function glowit2(which){
    if (document.all.glowtext.filters[0].strength==3)
    document.all.glowtext.filters[0].strength=2
    else
    document.all.glowtext.filters[0].strength=3
    }
    
    function startglowing(){
    if (document.all.glowtext&&glowtext.length){
    for (i=0;i<glowtext.length;i++)
    eval('setInterval("glowit('+i+')",150)')
    }
    else if (glowtext)
    setInterval("glowit2(0)",150)
    }
    
    if (document.all)
    window.onload=startglowing
    </script>
    </Head>
    
    //To Call Glowing Text
    <span id="glowtext">This is a glowing text</span>

  9. #9

    Thread Starter
    Fanatic Member paralinx's Avatar
    Join Date
    Jun 2005
    Location
    Michigan
    Posts
    987

    Text Animations - Pulsating Message

    HTML Code:
    <Head>
    <script>
    <!--
    
    //Pulsating Text (Chris A e-mail: [email]KilerCris@Mail.com[/email])
    //Permission granted to Dynamic Drive to feature script in archive
    //For full source and 100's more DHTML scripts, visit [url]http://www.dynamicdrive.com[/url]
    
    var divs = new Array();
    var da = document.all;
    var start;
    
    //CONFIGUER THESE VARS!!!!!!
    //speed of pulsing
    var speed = 50;
    
    function initVars(){
    
    if (!document.all)
    return
    
    //Extend of shrink the below list all you want
    //put an "addDiv(1,"2",3,4); for each div you made, 
    //1)'id' of div
    //2)color or glow(name or hex)(in quotes!!!)
    //3)minimum strength
    //4)maximum strength
    
    addDiv(hi,"lime",2,11);
    addDiv(welcome,"red",4,9);
    addDiv(message,"purple",2,4);
    addDiv(msg2,"orange",15,17);
    addDiv(msg3,"blue",1,3);
    
    //NO MORE EDITING!!!!!!
    
    
    
    startGlow();
    }
    
    function addDiv(id,color,min,max)
    {
    var j = divs.length;
    divs[j] = new Array(5);
    divs[j][0] = id;
    divs[j][1] = color;
    divs[j][2] = min;
    divs[j][3] = max;
    divs[j][4] = true;
    }
    
    function startGlow()
    {
    	if (!document.all)
    		return 0;
    
    	for(var i=0;i<divs.length;i++)
    	{
    		divs[i][0].style.filter = "Glow(Color=" + divs[i][1] + ", Strength=" + divs[i][2] + ")";
    		divs[i][0].style.width = "100%";
    	}
    
    	start = setInterval('update()',speed);
    }
    
    function update()
    {
    	for (var i=0;i<divs.length;i++)
    	{
    		if (divs[i][4])
    		{
    			divs[i][0].filters.Glow.Strength++;
    			if (divs[i][0].filters.Glow.Strength == divs[i][3])
    				divs[i][4] = false;
    		}
    	
    		if (!divs[i][4])
    		{
    			divs[i][0].filters.Glow.Strength--;
    			if (divs[i][0].filters.Glow.Strength == divs[i][2])
    				divs[i][4] = true;
    		}
    	}
    }
    -->
    </script>
    </Head>
    
    <Body>
    <div id="hi" style="color: lime">
    Hello!
    </div>
    <br>
    <div id="welcome" style="color: lime">
    Welcome!
    </div>
    <br>
    <div id="message" style="color: lime">
    This is a pulsating message!
    </div>
    <br>
    <div id="msg2" style="color: lime">
    This is another pulsating message!
    </div>
    <br>
    <div id="msg3" style="color: lime">
    This is yet another pulsating message!
    </div>
    </Body>

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width