Text effects scripts

BACK TO FREE JAVASCRIPTS VERTICAL SCROLL

REVLOLVING COLORS

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i] = initArray.arguments[i];
   }
}

MOUSEOVER APPEAR

<html>
<head>
<TITLE>menu visibility</title>

.Menu {
                position: absolute;   
                width: 80%; 
        border: 1px white; 
        background-color: white; 
        layer-background-color: white;                     
                top: 100px;
                left : 10%;
                line-height : 25px;
                font-family : Arial;
        visibility: hidden;                                     
                                        } 
.Mo {
                position: absolute;                     
                text-decoration : none; 
        border: 0px white; 
        background-color: white; 
        layer-background-color: white;                     
                top: 100px;
                left: 10%;
        width: 80%;
        font-family : Arial;
                visibility: hidden;                                     
                                        } 
.hide {
                visibility: hidden;
                font-family : Arial;
                } 
</style>
<script>
        var mo_lastMenu;
        var lastMenu = "null";
        if (document.layers) {  
                visible = 'show';  hidden = 'hide';
                                                } 
        else if (document.all) {  
                visible = 'visible';  hidden = 'hidden';
        }
    
function toggle(menu) {
        if (document.layers) {
        Menu = document.layers[menu];  
        } 
        else if (document.all) {
        Menu = document.all(menu).style;  
        }        
        if (Menu.visibility == visible) {
        Menu.visibility = hidden;  
        } 
        else {    
        clean(lastMenu);
                Menu.visibility = visible;  
        }
        lastMenu = Menu;
        }
    
function clean(Menu){
        if (Menu == "null"){
                return; 
        }
        if (Menu.visibility == visible) {
        Menu.visibility = hidden;  
        } 
        }
    
function mo_toggle(menu) {
        if (document.layers) {
        Menu = document.layers[menu];  
        } 
        else if (document.all) {
        Menu = document.all(menu).style;  
        }        
        if (Menu.visibility == visible) {
        Menu.visibility = hidden;  
        } 
        else {    
                Menu.visibility = visible;  
        }
        mo_lastMenu = Menu;
        }
    
    
</script>
</head>

<CENTER>
<A href="#" onclick="toggle('clickWeb');return false;" onmouseout="javascript:mo_toggle('mo_web');return false;" onmouseover="javascript:mo_toggle('mo_web');return false;" >
<B><font size="+1" color="purple" face="Arial">Put Mouse Over Here here</A></B></FONT> 
</CENTER>

<div id="mo_web" class="Mo">
<FONT SIZE="+2" COLOR="green" face="Arial"><CENTER>
This is what happens!!
</FONT></CENTER>
</div>

<div id="clickWeb" class="Menu">
<FONT SIZE="+2" COLOR="red" face="Arial"><CENTER>
Clicking the link presents these results.
</FONT></CENTER>
</div>

<BR>

FADE TEXT

// Modified by CoffeeCup Software

function MakeArray(n)
{
  this.length=n;
  for(var i=1; i<=n; i++) this[i]=i-1;
  return this
}

hex=new MakeArray(16);
hex[11]="A"; 
hex[12]="B"; 
hex[13]="C"; 
hex[14]="D"; 
hex[15]="E"; 
hex[16]="F";

function ToHex(x)
{
// Changes a int to hex (in the range 0 to 255)
  var high=x/16;
  var s=high + "";
  s=s.substring(0,2);
  high=parseInt(s,10);
  var left=hex[high+1];

var low=x-high*16;
  s=low+"";
  s=s.substring(0,2);
  low=parseInt(s,10);
  var right=hex[low+1];

var string=left + "" + right;
  return string;
}

function fadein(text)
{
  text=text.substring(3,text.length-4);

color_d1=255;
  color_d1b=255;
  color_d1c=255;

mul=color_d1/text.length;   
  for(i=0;i<text.length;i++)
  {
    color_d1=mul*i; 
    color_d1b=255-mul*i;
    color_d1c=255*Math.sin(i/(text.length/3));
// *******
// some other things you can try>> "=255-mul*i" to fade out, "=mul*i" to fade in, or try "255*Math.sin(i/(text.length/3))"
// *******
    color_h1=ToHex(color_d1);
    color_d2=mul*i;
    color_h2=ToHex(color_d2);

color_h1b=ToHex(color_d1b);
    color_d2b=mul*i;
    color_h2b=ToHex(color_d2b);

color_h1c=ToHex(color_d1c);
    color_d2c=mul*i;
    color_h2c=ToHex(color_d2c);

document.write("<FONT COLOR='#FF8000"+color_h1+color_h2+"'>"+text.substring(i,i+1)+'</FONT>');
  }
}
// --End Hiding Here -->
</script>
<SCRIPT LANGUAGE="JavaScript">
This is the Text, just put yours here !<!__");  }
//-->
</SCRIPT>

FALLING WORDS

<HTML>
<HEAD>
<script LANGUAGE="JavaScript" FPTYPE="dynamicanimation8">
<!--

dynamicanimAttr = "dynamicanimation8"
  animateElements = new Array()
  currentElement = 0
  speed = 0
  stepsZoom = 8
  stepsWord = 8
  stepsFly = 12
  stepsSpiral = 16
  steps = stepsZoom
  step = 0
  outString = ""
  function dynAnimation8()
  {
    var ms = navigator.appVersion.indexOf("MSIE")
    ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
    if(!ie4)
    {
      if((navigator.appName == "Netscape") &&
         (parseInt(navigator.appVersion.substring(0, 1)) >= 4))
      {
        for (index=document.layers.length-1; index >= 0; index--)
        {
            layer=document.layers[index]
            if (layer.left==10000)
                layer.left=0
        }
      }
      return
    }
    for (index=document.all.length-1; index >= document.body.sourceIndex; index--)
    {
      el = document.all[index]
      animation = el.getAttribute(dynamicanimAttr, false)
      if(null != animation)
      {
        if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
        {
          ih = el.innerHTML
          outString = ""
          i1 = 0
          iend = ih.length
          while(true)
          {
            i2 = startWord(ih, i1)
            if(i2 == -1)
              i2 = iend
            outWord(ih, i1, i2, false, "")
            if(i2 == iend)
              break
            i1 = i2
            i2 = endWord(ih, i1)
            if(i2 == -1)
              i2 = iend
            outWord(ih, i1, i2, true, animation)
            if(i2 == iend)
              break
            i1 = i2
          }
          document.all[index].innerHTML = outString
          document.all[index].style.posLeft = 0
          document.all[index].setAttribute(dynamicanimAttr, null)
        }
        if(animation == "zoomIn" || animation == "zoomOut")
        {
          ih = el.innerHTML
          outString = "<SPAN " + dynamicanimAttr + "=\"" + animation + "\" style=\"position: relative; left: 10000;\">"
          outString += ih
          outString += "</SPAN>"
          document.all[index].innerHTML = outString
          document.all[index].style.posLeft = 0
          document.all[index].setAttribute(dynamicanimAttr, null)
        }
      }
    }
    i = 0
    for (index=document.body.sourceIndex; index < document.all.length; index++)
    {
      el = document.all[index]
      animation = el.getAttribute(dynamicanimAttr, false)
      if (null != animation)
      {
        if(animation == "flyLeft")
        {
          el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
          el.style.posTop = 0
        }
        else if(animation == "flyRight")
        {
          el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
          el.style.posTop = 0
        }
        else if(animation == "flyTop" || animation == "dropWord")
        {
          el.style.posLeft = 0
          el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
        }
        else if(animation == "flyBottom")
        {
          el.style.posLeft = 0
          el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
        }
        else if(animation == "flyTopLeft")
        {
          el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
          el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
        }
        else if(animation == "flyTopRight" || animation == "flyTopRightWord")
        {
          el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
          el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
        }
        else if(animation == "flyBottomLeft")
        {
          el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
          el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
        }
        else if(animation == "flyBottomRight" || animation == "flyBottomRightWord")
        {
          el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
          el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
        }
        else if(animation == "spiral")
        {
          el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
          el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
        }
        else if(animation == "zoomIn")
        {
          el.style.posLeft = 10000
          el.style.posTop = 0
        }
        else if(animation == "zoomOut")
        {
          el.style.posLeft = 10000
          el.style.posTop = 0
        }
        else
        {
          el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
          el.style.posTop = 0
        }
        el.initLeft = el.style.posLeft
        el.initTop = el.style.posTop
        animateElements[i++] = el
      }
    }
    window.setTimeout("animate();", speed)
  }
  function offsetLeft(el)
  {
    x = el.offsetLeft
    for (e = el.offsetParent; e; e = e.offsetParent)
      x += e.offsetLeft;
    return x
  } 
  function offsetTop(el)
  {
    y = el.offsetTop
    for (e = el.offsetParent; e; e = e.offsetParent)
      y += e.offsetTop;
    return y
  } 
  function startWord(ih, i)
  {
    for(tag = false; i < ih.length; i++)
    {
      c = ih.charAt(i)
      if(c == '<')
        tag = true
      if(!tag)
        return i
      if(c == '>')
        tag = false
    }
    return -1
  }
  function endWord(ih, i)
  {
    nonSpace = false
    space = false
    while(i < ih.length)
    {
      c = ih.charAt(i)
      if(c != ' ')
        nonSpace = true
      if(nonSpace && c == ' ')
        space = true
      if(c == '<')
        return i
      if(space && c != ' ')
        return i
      i++
    }
    return -1
  }
  function outWord(ih, i1, i2, dyn, anim)
  {
    if(dyn)
      outString += "<SPAN " + dynamicanimAttr + "=\"" + anim + "\" style=\"position: relative; left: 10000;\">"
    outString += ih.substring(i1, i2)
    if(dyn)
      outString += "</SPAN>"
  }
  function animate()
  {
    el = animateElements[currentElement]
    animation = el.getAttribute(dynamicanimAttr, false)
    step++
    if(animation == "spiral")
    {
      steps = stepsSpiral
      v = step/steps
      rf = 1.0 - v
      t = v * 2.0*Math.PI
      rx = Math.max(Math.abs(el.initLeft), 200)
      ry = Math.max(Math.abs(el.initTop),  200)
      el.style.posLeft = Math.ceil(-rf*Math.cos(t)*rx)
      el.style.posTop  = Math.ceil(-rf*Math.sin(t)*ry)
    }
    else if(animation == "zoomIn")
    {
      steps = stepsZoom
      el.style.fontSize = Math.ceil(50+50*step/steps) + "%"
      el.style.posLeft = 0
    }
    else if(animation == "zoomOut")
    {
      steps = stepsZoom
      el.style.fontSize = Math.ceil(100+200*(steps-step)/steps) + "%"
      el.style.posLeft = 0
    }
    else
    {
      steps = stepsFly
      if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
        steps = stepsWord
      dl = el.initLeft / steps
      dt = el.initTop  / steps
      el.style.posLeft = el.style.posLeft - dl
      el.style.posTop = el.style.posTop - dt
    }
    if (step >= steps) 
    {
      el.style.posLeft = 0
      el.style.posTop = 0
      currentElement++
      step = 0
    }
    if(currentElement < animateElements.length)
      window.setTimeout("animate();", speed)
  }
//-->
</script>
</HEAD>
<BODY onload="dynAnimation8()">
<p dynamicanimation8="dropWord"
style="position: relative !important; left: 10000 !important"><FONT SIZE=5>The Falling Words JavaScript works only in IE4+</FONT></p>
</BODY>
</HTML>

TEXT SLIDESHOW

<HTML>
 
 
<HEAD>
<TITLE>AMAZING TEXT SLIDESHOW</TITLE>

<!--   DESCRIPTION:  This will make your text appear on the browser, line by line, and then conclude with an auto-jump to your website.

INSTRUCTIONS:  Place this script in the HEAD tags of
your webpage.  Then place the text you want to be displayed in
the area below starting with 'Hello'.  It will be after the 'var words' variable.

IMPORTANT:  This is a stand alone page.  Be sure to change the link below so that it will jump to your homepage.

FUNCTIONALITY: Works in both Netscape & IE.
-->

<SCRIPT LANGUAGE="JavaScript">
//Modified by CoffeeCup Software 
//This code is Copyright (c) 1997 CoffeeCup Software 
//all rights reserved. License is granted to a single user to 
//reuse this code on a personal or business Web Site.

function makeArray() {
     this.length = makeArray.arguments.length;
             for (var i = 0; i < this.length; i++)
             this[i + 1] = makeArray.arguments[i];
     }

function ccText (val1, val2, val3, val4) {
     this.curText = '';
     this.posit = 1;   
     this.word = val1;  
     this.length = val1.length;
     this.val3 = val3;
     this.val2 = val2;
     this.val4 = val4;
     this.print = ccText2;
     }

function ccTextSlide() {
     if (!doneLoop) reDraw = setTimeout('ccTextSlide()', wordIntro.val2);
     wordIntro.print();
     }

var words = new makeArray (' Hello ',' ...and welcome to CoffeeCup Software. ', ' This is our <U>TEXT SLIDESHOW...</U> ', ' Use this script to open up your website... ', ' Display important or urgent news... ', ' Finish it with an <A HREF=http://www.coffeecup.com/><B>auto-link</B></A> to your website!! ');
     var wordIntro = new ccText (words, 2000, '<CENTER><FONT SIZE=5 FACE=VERDANA, ARIAL, Comic Sans MS>', 'http://www.coffeecup.com/');

var ccU = '<HTML><BODY BGCOLOR="#000000" TEXT= "#000000"><CENTER><H3><FONT FACE=ARIAL SIZE=6 COLOR=#FFFFFF>The Amazing Text Slideshow</FONT></h3></CENTER><BR><BR><CENTER><TABLE WIDTH=100% BGCOLOR=#FFFFFF><TR><TD>';
     var ccD = '</TD></TR></table><br><br></HTML>';
     var ccB = ccU + ccD;
     var doneLoop = false;
</SCRIPT>
<FRAMESET onLoad="ccTextSlide()" ROWS="100%, *" FRAMEBORDER=NO BORDER=0>
<FRAME SCROLLING=AUTO SRC="javascript:parent.ccB" NAME="draw" MARGINWIDTH=3 MARGINHEIGHT=3>
</FRAMESET>
</HEAD>
</HTML>