ivanswebs Beta

Home

Codigos javascript

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></textarea> <div align="center"> <table border="0" cellpadding="0" cellspacing="0" width="80%" height="40"> <tr> <td width="50%" align="center"><input type="button" class="metal" name="seleccionar" value="Selecciona el código" onClick="document.vercodigo0051.campo_script0051.select()"></td>  <td width="50%" align="center"><font face="Verdana" size="2" color="#008000"><b><a href="../../crea_tu_web/demostraciones/efectos_texto/texto_cambia_color_continuamente.htm" style="font-family: Verdana; color: #008000; font-size: 10 pt; font-weight: bold" target="_blank">Ver demostración</a></b></font></td> </tr> </table> </div> </form></center></td> </tr> </table></td> </tr> <tr> <td width="100%" align="center"><table border="0" cellpadding="0" cellspacing="0" width="100%" style="color: #000080; font-family: Verdana; font-size: 10 pt"> <tr> <td width="100%"> <div align="center"> <table border="0" cellpadding="0" cellspacing="0" width="100%" style="font-family: Verdana; font-size: 10 pt; color: #000080"> <tr> <td width="30%" style="font-weight: bold">CÓDIGO 0052</td> <td width="70%" style="color: #008000; font-weight: bold"><font color="#FF0000">Palabras que caen hasta un párrafo.</font></td> </tr> </table> </div> </td> </tr> <tr> <td width="100%">Este código te permite simulando una lluvia de palabras crear un párrafo, ideal para llamar la atención con un mensaje.</td> </tr> <tr> <td width="100%"> <p align="center"><form NAME="vercodigo0052"> <p align="center"> <center><textarea NAME="campo_script0052" ROWS="4" COLS="75" style="font-family: Verdana; font-size: 8 pt"><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

Hoy habia 54498 visitantes (117691 clics a subpáginas) en ivanswebs

Home

Codigos javascript

No se

Info Categorias

Categorias