Degradado de color Javascript

  • Por
Script para conseguir un degradado del color de fondo de la página web. Un ejemplo es simple y otro, más complejo, se adapta a muchos degradados distintos.
Vamos a ver un ejemplo típico de efecto especial en una página web: un degradado de colores para el fondo de la página.

El degradado consiste en cambiar el color de fondo de la página poco a poco para ir acercándolo hacia otro color . Podemos hacer muchos degradados distintos para páginas web con poco esfuerzo, pocos conocimientos técnicos y bastante de imaginación.

Se puede ver un ejemplo de degradado en una página a parte, para hacerse una idea exacta de lo que vamos a explicar en este taller. Además, al final del artículo, veremos un script que permite hacer una ámplia gama de degradados, como este ejemplo de degradado más complejo.

Complicación del degradado

La mayor complicación que encontramos a la hora de crear un script para hacer un degradado es que los colores se expresan en hexadecimal y en Javascript trabajamos con números decimales. De modo que, para convertir nuestros números decimales en hexadecimales y poder así utilizarlos para indicar colores hemos creado una función especial:

function convierteHexadecimal(num){
    var hexaDec = Math.floor(num/16)
    var hexaUni = num - (hexaDec * 16)
    return hexadecimal[hexaDec] + hexadecimal[hexaUni]
}


La función devuelve el número pasado por parámetro en forma hexadecimal. Por ejemplo, si recibe 140 devuelve 8C. Si recibe 15 devuelve 0F.

Para ello se ayuda de un Array creado anteriormente que guarda conversión de números decimales a hexadecimales de las unidades básicas, es decir, del 0 a la letra F. Esta es la línea que crea el Array.

hexadecimal = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")

La función primero calcula los grupos de 16 que se pueden hacer a partir del número que recibimos. El número de estos grupos serían las "hexa-decenas".

Luego calculamos el resto de la división anterior, o dicho de otra forma, cuantas unidades nos restan después de tomar estas "hexa-decenas". Éste segundo número serán las unidades. Al juntar las unidades con los grupos de 16 que hemos obtenido, convirtiendo ambos valores por medio del array de conversión decimal a hexadecimal, conseguimos la conversión buscada.

Creando la secuencia de colores para el degradado

Una vez podemos convertir del valor decimal (necesario para llevar la cuenta en Javascript) al hexadecimal (necesario para indicar un color) nuestra única tarea será contar en decimal los colores y convertirlos a hexadecimal antes de cambiar la propiedad document.bgColor, que como sabemos es la propiedad que guarda el color de fondo de la página.

Hemos querido hacer un primer ejemplo muy simple para que se pueda entender más fácilmente. El ejemplo lo hemos podido ver anteriormente en funcionamiento. Se trata de una escala de grises que empieza en negro y termina en blanco.

color_decimal = 0

Primero inicializamos la variable color_decimal, que es la que guarda el color actual a mostrar, en formato decimal. Sólo guardamos un valor del color pues, al ser una escala de grises, todos los valores RGB son el mismo.

Tendremos una función llamada degradado que será la encargada de realizar la mayor parte del trabajo.

function degradado(){
    color_decimal ++
    color_hexadecimal = convierteHexadecimal(color_decimal)
    document.bgColor = color_hexadecimal + color_hexadecimal + color_hexadecimal

    //la llamo con un retardo
    if (color_decimal < 255)
       setTimeout("degradado()",1)
}


La función se encarga de incrementar el color_decimal en una unidad, convertirlo en hexadecimal y colocarlo dentro de propiedad document.bgColor para actualizar el fondo de la página.

Finalmente, y en esto se basan muchos efectos especiales de Javascript, se llama la función a si misma con un retardo. En el ejemplo podemos ver que si el color_decimal es menor de 255 (que es el máximo que se puede alcanzar en colores) se llama a la función con setTimeout, que es la que nos crea el retardo.

El código de este ejemplo simple se puede ver entero a continuación:

<html>
<head>
    <title>Ejemplo de degradado 1</title>
</head>

<body bgcolor=000000>

<h1 align="center">Degradando...</h1>
<h2>Ejemplo 1</h2>
En esta página podemos ver un ejemplo de degradado de negro a blanco, con una sola pasada. Solo se ve el texto cuando el fondo es suficientemente blanco para que contraste.

<script language="javascript">

hexadecimal = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")

function convierteHexadecimal(num){
    var hexaDec = Math.floor(num/16)
    var hexaUni = num - (hexaDec * 16)
    return hexadecimal[hexaDec] + hexadecimal[hexaUni]
}

color_decimal = 0

function degradado(){
    color_decimal ++
    color_hexadecimal = convierteHexadecimal(color_decimal)
    document.bgColor = color_hexadecimal + color_hexadecimal + color_hexadecimal

    //la llamo con un retardo
    if (color_decimal < 255)
       setTimeout("degradado()",1)
}

degradado()
</script>
</body>
</html>


Si queremos, también se puede ver el ejemplo en funcionamiento en una página a parte.

Más degradados

Probablemente este no sea el ejemplo más útil para el lector que desea implementar un degradado en su página, pues resulta un poco simple y específico. Para solucionar este asunto hemos creado un sistema donde se puede configurar el tipo de degradado de la página con una serie de variables. Es un ejemplo que se basa en el que acabamos de ver, aunque tiene muchas variables para parametrizar el comportamiento del degradado y que se adapte a las necesidades del desarrollador.

Por falta de tiempo no vamos a explicar todo el script, tan sólo vamos a fijarnos en las variables que permiten configurarlo.

color_inicio = new Array(150,150,255)

Con color_incio configuramos el color que se muestra al principio en la página. Lo indicamos con un array, donde en cada casilla colocamos el valor decimal de cada uno de los tres colores RGB.

color_fin = new Array(255,99,0)

Con color_fin configuramos el color al que va a tender nuestro degradado, de manera idéntica a como lo hacíamos en el color_inicio

pasos = 100

Es el número de pasos que vamos a utilizar en alcanzar el valor del color final, desde el color de inicio.

comportamiento = 1

Esta variable sirve para definir el comportamiento del script en cuatro posibles valores:

  1. Realiza un bucle infinito desde el color de inicio al color fin y del color fin al color de inicio, para volver a empezar. Se repite por siempre.
  2. Realiza una pasada desde el color inicio al color fin. Termina cuando acaba la pasada.
  3. Realiza una pasada del color de inicio al de fin y una vuelta desde el fin al inicio. Termina cuando realiza la ida y la vuelta.
  4. Un bucle infinito con una parada de 10 segundos entre cuando ha hecho la ida y la vuelta, antes de volver ha empezar otra ida-vuelta.
Ejemplos de degradado completo

Podéis descargar el ejemplo de degradado completo aquí: degradado.zip.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

David

12/9/2006
Cuando jalo mi hoja de estilos (style.css) no me permite hacer uso de la funcion de degradado, la quito y funciona sin problemas, desafortunadamente necesito la hoja de estilos... me gustaria que me dijeran cual es ahi el problemas, que funcion, instruccion o cosa que impide que se ejecute la funcion de degradado.

NOTA:
ya intente hacer funcionar el degradado de muchas maneras y ninguna funciona

Poloharvin

12/4/2007
En tu hoja de estilos, si tienes definido el BODY o si lo tienes como una clase (.) o id (#) quita la propiedad background (ponla como comentario), ya veras como funciona...

Miguen Navarro

16/2/2008
La función de JavaScript toString() puede convertir directamente un número decimal a hexadecimal.

Si el número está en la variable 'numeroDec', la conversión sería:

numeroHex = numeroDec.toString(16);

cristian

22/2/2009
quiero esa letra ta re grosa ;) [b]beso[/b]

Edinson

08/5/2010
felicitaciones
quiero da las gracias a desarrolloweb por tan buenos contenidos
espero sigan asi...felicitaciones!!!!