Como conseguir este efecto?

kafok · #1 (**permalink**) 11/07/2011, 09:20

Como puedo conseguir un que un texto cambie de color continuamente?

velasquezdalexander · #2 (**permalink**) 11/07/2011, 09:28

usa flash...

raul_romero · #3 (**permalink**) 11/07/2011, 11:44

Hola, claro que se puede hacer en Javascript. Creo que no hay que depender tanto del Flash para ciertas animaciones que se pueden conseguir facilmente con js.

Este codigo está un poco largo y puede ser optimizado.

Código Javascript:

Ver original<script>
 
// La funcion que cambia el color, lo que hago es primero darle color de fondo a un Div y luego le asigno ese color de fondo al texto.
//utilizamos la funcion random de Math para obtener colores aleatorios y los multplicamos por 255 para que sean menores a 255, luego los redondeamos con round.
function color(){
    r=Math.random()*255;
    r=Math.round(r);
    g=Math.random()*255;
    g=Math.round(g);
    b=Math.random()*255;
    b=Math.round(b);
    // Asignamos el color de fondo al div
    document.getElementById("color").style.backgroundColor = "rgb("+r+","+g+","+b+")";
    //Luego asignamos el color del fondo del div al texto.
    document.getElementById("texto").style.color = document.getElementById("color").style.backgroundColor;  
    }
 
//Con setInterval hacemos que se ejecute la funcion casa segundo (1000) puede ser menos o mas.
function iniciar(){
    setInterval("color()",1000);
    }
 
</script>

Código CSS:

Ver original<style type="text/css">
/*Un poco de estilos para que se pueda ver bien el texto*/
p {font-size:36px; font-family:Georgia, "Times New Roman", Times, serif;}
</style>

</head>

En en html que ejecute la funcion iniciar al cargar la página. Al DIV le ponemos un "display:none" para que no se muestre.

Código HTML:

Ver original<body onload="iniciar();">
<p id="texto" onclick="color()">Texto</p>
<div id="color" style="display:none;"></div>
</body>

ceSharp · #4 (**permalink**) 12/07/2011, 02:26

buenas,
así está mas reducidito, y es para cambiar el color del texto, no el fondo:
-----------------
<script type="text/javascript">
setInterval("colores()",100);
function colores()
{
var r,g,b;
r=Math.round(Math.random()*255);
g=Math.round(Math.random()*255);
b=Math.round(Math.random()*255);
document.getElementById('div_color').style.color=' rgb('+r+','+g+','+b+')';
}

</script>
<body>

<div id="div_color">me llaman el colorines!!!</div>

</body>
--------------------------
saludos

zerokilled · #5 (**permalink**) 12/07/2011, 20:31

o así, adquiriendo un valor aleatorio entre 0x0 y 0xffffff, luego lo conviertes en expresion hexadecimal.

Código:

random_color = Math.round(Math.random() * 0xffffff).toString(16);
while(random_color.length < 6) random_color = "0" + random_color;
element.style.color = '#' + random_color;

kafok · #6 (**permalink**) 13/07/2011, 06:22

Muchas gracias, me funciona bien. Todavia no he tocado este tema en js pero por lo que veo la funcion Math.random() devuelve un numero aleatorio entre 0 y 1 si no me equivoco ¿no?