harry potter - efectos de textos

LOS EFECTOS DE TEXTO MAS ATRACTIVOS

CÓDIGO 0051

Texto que cambia de color.

Con este código podrás tener una línea de texto que cambia de color continuamente. Puedes especificar hasta cuatro colores distintos.

<html>
                                    <head>
                                    <title>Texto que cambia de color continuamente</title>
                                    </head>
                                    <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];
                                    }
                                    }
                                    var ctext = "Trucos para tu web en UTERRA.COM";
                                    var speed = 1000;
                                    var x = 0;
                                    var color = new initArray(
                                    "red",
                                    "blue",
                                    "green",
                                    "black"
                                    );
                                    if(navigator.appName == "Netscape") {
                                    document.write('<layer id="c"><center>'+ctext+'</center></layer><br>');
                                    }
                                    if (navigator.appVersion.indexOf("MSIE") != -1){
                                    document.write('<div id="c"><center>'+ctext+'</center></div>');
                                    }
                                    function chcolor(){
                                    if(navigator.appName == "Netscape") {
                                    document.c.document.write('<center><font color="'+color[x]); document.c.document.write('">'+ctext+'</font></center>');
                                    document.c.document.close();
                                    }
                                    else if (navigator.appVersion.indexOf("MSIE") != -1){
                                    document.all.c.style.color = color[x];
                                    }
                                    (x <color.length-1) ? x++ : x=0; } setInterval("chcolor()",1000);
                                    </SCRIPT>
                                    </CENTER>
                                    </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>
                                    <body TEXT="#000000" LINK="#000000" ALINK="#FFD700" VLINK="#FFD700"
                                    onload="dynAnimation8()">
                                    <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