Foros del Web » Programando para Internet » Javascript »

Como conseguir este efecto?

Estas en el tema de Como conseguir este efecto? en el foro de Javascript en Foros del Web. Como puedo conseguir un que un texto cambie de color continuamente?...
  #1 (permalink)  
Antiguo 11/07/2011, 09:20
 
Fecha de Ingreso: junio-2011
Mensajes: 89
Antigüedad: 8 años, 3 meses
Puntos: 7
Como conseguir este efecto?

Como puedo conseguir un que un texto cambie de color continuamente?
  #2 (permalink)  
Antiguo 11/07/2011, 09:28
 
Fecha de Ingreso: abril-2011
Mensajes: 41
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Como conseguir este efecto?

usa flash...
  #3 (permalink)  
Antiguo 11/07/2011, 11:44
 
Fecha de Ingreso: julio-2008
Mensajes: 91
Antigüedad: 11 años, 3 meses
Puntos: 6
Respuesta: Como conseguir este efecto?

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
  1. <script>
  2.  
  3. // 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.
  4. //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.
  5. function color(){
  6.     r=Math.random()*255;
  7.     r=Math.round(r);
  8.     g=Math.random()*255;
  9.     g=Math.round(g);
  10.     b=Math.random()*255;
  11.     b=Math.round(b);
  12.     // Asignamos el color de fondo al div
  13.     document.getElementById("color").style.backgroundColor = "rgb("+r+","+g+","+b+")";
  14.     //Luego asignamos el color del fondo del div al texto.
  15.     document.getElementById("texto").style.color = document.getElementById("color").style.backgroundColor; 
  16.     }
  17.  
  18. //Con setInterval hacemos que se ejecute la funcion casa segundo (1000) puede ser menos o mas.
  19. function iniciar(){
  20.     setInterval("color()",1000);
  21.     }
  22.  
  23. </script>
Código CSS:
Ver original
  1. <style type="text/css">
  2. /*Un poco de estilos para que se pueda ver bien el texto*/
  3. p {font-size:36px; font-family:Georgia, "Times New Roman", Times, serif;}
  4. </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
  1. <body onload="iniciar();">
  2. <p id="texto" onclick="color()">Texto</p>
  3. <div id="color" style="display:none;"></div>
  4. </body>
  #4 (permalink)  
Antiguo 12/07/2011, 02:26
Avatar de ceSharp  
Fecha de Ingreso: octubre-2008
Ubicación: Madrid
Mensajes: 495
Antigüedad: 11 años
Puntos: 66
Respuesta: Como conseguir este efecto?

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
  #5 (permalink)  
Antiguo 12/07/2011, 20:31
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 10 años, 5 meses
Puntos: 1485
Respuesta: Como conseguir este efecto?

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;
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #6 (permalink)  
Antiguo 13/07/2011, 06:22
 
Fecha de Ingreso: junio-2011
Mensajes: 89
Antigüedad: 8 años, 3 meses
Puntos: 7
Respuesta: Como conseguir este efecto?

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?

Etiquetas: conseguir
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 09:45.