Script para conseguir una animación del color de fondo de la página web, creando un degradado animado que va cambiando el background dinámicamente.
Este artículo tiene poca utilidad en el día de hoy porque este efecto se puede realizar con una animación CSS sencilla, en el que se anima la propiedad background. Puedes aprender animaciones CSS para hacer tus propios comportamientos dinámicos. No obstante, es un ejercicio interesante porque trabaja el mecanismo de recursividad en Javascript con setTimeout, que es interesante para hacer comportamientos que se repiten una y otra vez, sin bloquear el navegador.
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.
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:
- 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.
- Realiza una pasada desde el color inicio al color fin. Termina cuando acaba la pasada.
- 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.
- 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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...