viernes, 22 de enero de 2010

Texto con efecto arco iris

Hace un tiempo vimos cómo agregar el efecto arco iris a los enlaces, efecto que sólo era visible al pasar el mouse sobre el enlace.
Por cierto la DEMO la pueden ver en mi blog de pruebas, en la sidebar con un texto que dice Bienvenidos.

Así que G me pregunó un día si podíamos hacer eso pero en un texto, de forma que el efecto fuese siempre visible.

Hoy vamos a ver que es muy sencillo de conseguir:

1.§ Vamos a Diseño- Elementos de la página- Añadir un gadget y escogemos HTML/Javascript.

2.§ En el nuevo elemento, pegaremos el siguiente script:

<script>
/*
RAINBOW TEXT Script by Matt Hedgecoe (c) 2002
Featured on JavaScript Kit
*/

// **********
var text="Aquí-tu-texto" //
var speed=80 //

if (document.all||document.getElementById){
document.write('<span id="highlight">' + text + '</span>')
var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight
}
else
document.write(text)
var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
function changetext(){
rainbow="#"+hex[r]+hex[g]+hex[b]
storetext.style.color=rainbow
}
function change(){
if (seq==6){
b--
if (b==0)
seq=1
}
if (seq==5){
r++
if (r==12)
seq=6
}
if (seq==4){
g--
if (g==0)
seq=5
}

if (seq==3){
b++
if (b==12)
seq=4
}
if (seq==2){
r--
if (r==0)
seq=3
}
if (seq==1){
g++
if (g==12)
seq=2
}
changetext()
}
function starteffect(){
if (document.all||document.getElementById)
flash=setInterval("change()",speed)
}
starteffect()
</script>

Cambiamos Aquí-tu-texto por el texto que tendrá el efecto y damos click a guardar.

Visto en : JavaScript Kit

No hay comentarios:

Publicar un comentario