Ver Mensaje Individual
  #3 (permalink)  
Antiguo 11/07/2011, 11:44
raul_romero
 
Fecha de Ingreso: julio-2008
Mensajes: 91
Antigüedad: 15 años, 9 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>