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. 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){ 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(){ //la llamo con un retardo 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:
Degradando…
Ejemplo 1En 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. 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:
|
Leave A Comment