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

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

</body>

</html>

Ver demostración

CÓDIGO 0052

Palabras que caen hasta un párrafo.

Este código te permite simulando una lluvia de palabras crear un párrafo, ideal para llamar la atención con un mensaje.

<html>

<head>
<title>Palabras que caen hasta completar un párrafo</title>
<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>

<p dynamicanimation8="dropWord" style="position: relative; left: 10000"><font color="#FF0000"><big><big>Observa
como caen las palabras hasta completar un párrafo. Es un efecto muy llamativo
para destacar cualquier tipo de mensajes en tu página web. Coloca este script
en tu página web.</big></big></font></p>

<p align="center"><a href="http://www.uterra.com">www.uterra.com</a></p>
</body>

</html>

Ver demostración

CÓDIGO 0053

Marquesina.

En esta marquesina o texto con desplazamiento podrás hasta incluir un hipervínculo.

<html> <head> <title>Marquesina</title> </head> <body> <script language="JavaScript1.2"> //Specify the marquee's width (in pixels) var marqueewidth=550 //Specify the marquee's height (in pixels, pertains only to NS) var marqueeheight=20 //Specify the marquee's scroll speed (larger is faster) var speed=6 //Specify the marquee contents var marqueecontents='<font face="Arial"><strong><big>Gracias por visitar <a href="http://www.uterra.com">UTERRA.COM.</a> desde aqui podras descargar muchos codigos gratuitos</a></big></strong></font>' if (document.all) document.write('<marquee scrollAmount='+speed+' style="width:'+marqueewidth+'">'+marqueecontents+'</marquee>') function regenerate(){ window.location.reload() } function regenerate2(){ if (document.layers){ setTimeout("window.onresize=regenerate",450) intializemarquee() } } function intializemarquee(){ document.cmarquee01.document.cmarquee02.document.write('<nobr>'+marqueecontents+'</nobr>') document.cmarquee01.document.cmarquee02.document.close() thelength=document.cmarquee01.document.cmarquee02.document.width scrollit() } function scrollit(){ if (document.cmarquee01.document.cmarquee02.left>=thelength*(-1)){ document.cmarquee01.document.cmarquee02.left-=speed setTimeout("scrollit()",100) } else{ document.cmarquee01.document.cmarquee02.left=marqueewidth scrollit() } } window.onload=regenerate2 </script> <ilayer width="&{marqueewidth};" height="&{marqueeheight};" name="cmarquee01"> <layer name="cmarquee02"> </layer> </ilayer> </body> </html>

Ver demostración

CÓDIGO 0054

Texto en expansión.

Con este código podrás crear un mensaje que se expande y contrae continuamente, además permite varias frases.

<html> <head> <title>Texto en expansion</title> </head> <body> <script LANGUAGE="JavaScript"> var speed = 100; var cycledelay = 2000; var maxsize = 28; var x = 0; var y = 0; var themessage, size; var esize = "</font>"; function initArray() { this.length = initArray.arguments.length; for (var i = 0; i < this.length; i++) { this[i] = initArray.arguments[i]; } } var themessage2 = new initArray( "Bienvenido a UTERRA.COM", "estas en el lugar ideal para construir tu web partiendo de cero", "no me crees?", "entretente un rato y veras!" ); if(navigator.appName == "Netscape") document.write('<layer id="wds"></layer><br>'); if (navigator.appVersion.indexOf("MSIE") != -1) document.write('<span id="wds"></span><br>'); function upwords(){ themessage = themessage2[y]; if (x < maxsize) { x++; setTimeout("upwords()",speed); } else setTimeout("downwords()",cycledelay); if(navigator.appName == "Netscape") { size = "<font point-size='"+x+"pt'>"; document.wds.document.write(size+"<center>"+themessage+"</center>"+esize); document.wds.document.close(); } if (navigator.appVersion.indexOf("MSIE") != -1){ wds.innerHTML = "<center>"+themessage+"</center>"; wds.style.fontSize=x+'px' } } function downwords(){ if (x > 1) { x--; setTimeout("downwords()",speed); } else { setTimeout("upwords()",cycledelay); y++; if (y > themessage2.length - 1) y = 0; } if(navigator.appName == "Netscape") { size = "<font point-size='"+x+"pt'>"; document.wds.document.write(size+"<center>"+themessage+"</center>"+esize); document.wds.document.close(); } if (navigator.appVersion.indexOf("MSIE") != -1){ wds.innerHTML = "<center>"+themessage+"</center>"; wds.style.fontSize=x+'px' } } setTimeout("upwords()",speed); </script> </body> </html>

Ver demostración

CÓDIGO 0055

Cambia el color letra a letra.

Este código te permite el cambio de color continuo de letras de manera sucesiva y continua.

<html> <head> <title>Texto que cambia de color letra a letra</title> </head> <BODY bgcolor="#000000"> <SCRIPT LANGUAGE="JavaScript"> text = "UTERRA.COM"; // The text to scroll color1 = "blue"; // original text color color2 = "white"; // new character color fontsize = "8"; // font size of text speed = 200; // how fast to rotate to next character // time is in milliseconds, (i.e. 1000 = 1 second) i = 0; if (navigator.appName == "Netscape") { document.write("<layer id=a visibility=show></layer><br><br><br>"); } else { document.write("<div id=a></div>"); } function changeCharColor() { if (navigator.appName == "Netscape") { document.a.document.write("<center><font size =" + fontsize + "><font color=" + color1 + ">"); for (var j = 0; j < text.length; j++) { if(j == i) { document.a.document.write("<font color=" + color2 + ">" + text.charAt(i) + "</font>"); } else { document.a.document.write(text.charAt(j)); } } document.a.document.write('</font></font></center>'); document.a.document.close(); } if (navigator.appName == "Microsoft Internet Explorer") { str = "<center><font size=" + fontsize + "><font color=" + color1 + ">"; for (var j = 0; j < text.length; j++) { if( j == i) { str += "<font color=" + color2 + ">" + text.charAt(i) + "</font>"; } else { str += text.charAt(j); } } str += "</font></font></center>"; a.innerHTML = str; } (i == text.length) ? i=0 : i++; // reset after going through all letters } setInterval("changeCharColor()", speed); </script> </body> </html>

Ver demostración

CÓDIGO 0056

Texto como gelatina.

Con este código el texto hace un efecto de vibración similar a si estuviese sobre un bloque de gelatina.

<html> <head> <title>Texto que se mueve como la gelatina</title> <script LANGUAGE="JavaScript"> dw=0; //change in width; dh=0; //change in height; function jitter() { w = (Math.round(Math.random()*10)%5)-2; dw+=w; h = (Math.round(Math.random()*10)%5)-2; dh+=h; if (dh>10) {h=(0-11);dh=0;} else if (dh<(0-10)) {h=11;dh=0;} if (dw>10) {w=(0-11);dw=0;} else if (dw<(0-10)) {w=11;dw=0;} vers = parseInt(navigator.appVersion); if (vers>=4) { if (navigator.appName=="Netscape") { document.jitterText.left+=w; document.jitterText.top+=h; } else if (navigator.appName=="Microsoft Internet Explorer") { document.all.jitterText.style.pixelLeft+=w; document.all.jitterText.style.pixelTop+=h; } setTimeout("jitter()",100); } else {} // browser can't view effect } </script> <style TYPE="text/css"> #jitterText { position: absolute; left: 0; top: 300; font-size:24pt; background:white; color:red; } </style> </head> <body OnLoad="jitter()"> <div ID="jitterText"> <p align="center">Mira como me muevo con UTERRA.COM !! </p> </div> </body> </html>

Ver demostración

Página anterior

Página siguiente