Los efectos de texto mas atractivos para tu página web.

<head>
<title>Texto que aparece palabra a palabra</title>
<script LANGUAGE="JavaScript">
  dynamicanimAttr = "mydynamicanimation"
  animateElements = new Array()
  currentElement = 0
  speed = 0
  stepsZoom = 8
  stepsWord = 8
  stepsFly = 12
  stepsSpiral = 16
  steps = stepsZoom
  step = 0
  outString = ""
  function mydynAnimation()
  {
    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>

<style>
.link {

color : orange;
	font-weight : bold;
	text-decoration : none;
	
}

A.link:hover {
	color : lime;
}

A.link:active {
	color : greenyellow;
	text-decoration : none;
	text-transform : uppercase;
}
</style>
</head>

<p align="center" style="LEFT: 10000px! important; POSITION: relative! important"
mydynamicanimation="flyTopRightWord"><font FACE="ARIAL" SIZE="6" color="blue"><a
href="http://www.uterra.com" class="link">Bienvenido a UTERRA.COM</a></font></p>

</body>
</html>

Ver demostración

CÓDIGO 0058

Texto animado en la barra de titulo.

Con este código puedes colocar un texto en la barra de titulo, que es esa franja que queda en el extremo superior del navegador donde también se encuentran los botones de cerrar, restaurar y minimizar.

CÓDIGO 0059

Texto cambiante en la barra de titulo.

Este código te permite colocar varios mensaje en la barra de titulo, que es esa franja que queda en el extremo superior del navegador donde también se encuentran los botones de cerrar, restaurar y minimizar.

<html> <head> <title>Texto animado cambiante en la barra de titulo</title> <SCRIPT LANGUAGE="JavaScript"> var message = new Array(); message[0] = "comentario"; message[1] = "aburrido"; message[2] = "o quizas"; message[3] = "interesante"; message[4] = "¿quien sabe?"; message[5] = "solo se que no se nada"; message[6] = "... JA JA JA JA "; // Set the number of repetitions (how many times the arrow // cycle repeats with each message). var reps = 2; var speed = 200; // Set the overall speed (larger number = slower action). var p = message.length; var T = ""; var C = 0; var mC = 0; var s = 0; var sT = null; if (reps < 1) reps = 1; function doTheThing() { T = message[mC]; A(); } function A() { s++; if (s > 8) { s = 1;} // you can fiddle with the patterns here... if (s == 1) { document.title = '||||||====||| '+T+' -----'; } if (s == 2) { document.title = '|||=|||===||| '+T+' -----'; } if (s == 3) { document.title = '|||==|||==||| '+T+' -----'; } if (s == 4) { document.title = '|||===|||=||| '+T+' -----'; } if (s == 5) { document.title = '|||====|||||| '+T+' -----'; } if (s == 6) { document.title = '|||===|||=||| '+T+' -----'; } if (s == 7) { document.title = '|||==|||==||| '+T+' -----'; } if (s == 8) { document.title = '|||=|||===||| '+T+' -----'; } if (C < (8 * reps)) { sT = setTimeout("A()", speed); C++; } else { C = 0; s = 0; mC++; if(mC > p - 1) mC = 0; sT = null; doTheThing(); } } doTheThing(); </script> </head> <body </body> </html>

Ver demostración

CÓDIGO 0060

Texto fijo en la barra de estado.

Con este script puedes colocar un mensaje en la barra estado, que es esa franja situada en la parte inferior del navegador donde aparece el indicador de carga de página.

CÓDIGO 0061

Texto en movimiento en la barra de estado.

Este código te permite colocar un texto que hace el efecto de marquesina, o texto deslizante, en la barra de estado.

CÓDIGO 0062

Texto parpadeante en la barra de estado.

Con este código el puedes colocar un texto que aparece y desaparece en la barra de estado.

Página anterior

Página siguiente