Cómo hacer Fondos Fading en HTML y CSS

No es necesario Flash o terceros plug-ins para impresionar a los visitantes del sitio. CSS y JavaScript hacen que sea posible para que pueda generar animaciones de colores y efectos visuales dentro del navegador del usuario. Una forma de hacer que su sitio web se destacan es fundir el fondo de una página Web cuando un usuario entra en su sitio. Este es un viejo efecto de HTML, pero todavía puede atraer la atención del público digitales en todas partes.

Instrucciones

1 Abrir uno de sus documentos HTML usando un editor HTML o Bloc de notas.

2 Pegue el siguiente código JavaScript en la sección "cabeza" del documento:

<Script language = "javascript" type = "text / javascript">

var REDSTART = 0xFF;

var greenStart = 0x00;

var blueStart = 0x00;

var EndColor = "# FFFFFF"; /

Blanco /

Valor mínimo var = 10;

retardo var = 80;

var keepRunning = true;

Las tres primeras variables definen los visitantes del sitio de color ver cuando abren su página. Un navegador necesita tres valores de color para producir un color: rojo, verde y azul. Las tres variables, "colirrojo", "greenStart" y "blueStart" representan los tres colores. Cada color tiene un valor hexadecimal. El valor hexadecimal de "colirrojo," por ejemplo, es "0xFF". No haga caso de los dos primeros caracteres "0x". Los dos últimos caracteres, "FF" son importantes. Ellos representan el color real. "FF" es el equivalente de 255 en notación decimal.

valores de color hexadecimales empiezan con 00 y aumentan todo el camino hasta 255. Cuanto mayor sea el valor, más intensa que aparece el color particular. En este ejemplo, el color rojo, que se define por "colirrojo", es el más grande. Su valor hexadecimal es "FF". Los valores hexadecimales de las variables "greenStart" y "blueStart" son a la vez "00" Estos tres valores de color producen un color que no contiene más que roja. Los visitantes del sitio podrán ver brevemente en rojo antes de que se desvanece a blanco.

La variable "EndColor" define color final de la página. En este ejemplo, que el color es blanco. El "incremento" y la variable "retraso" determinan qué tan rápido se produce la intensificación de la animación y lo suave que aparece animación.

3 Pega este código debajo del código que se muestra en el paso anterior:

funcionar fadeBackground () {

var prefix = "#";

var = backgroundColor prefijo + getHexVal (REDSTART) + getHexVal (greenStart) + getHexVal (blueStart);

document.bgColor = backgroundColor;

REDSTART + = incremento;

greenStart + = incremento;

blueStart + = incremento;

si (== backgroundColor EndColor)

keepRunning = false;

más

setTimeout(fadeBackground, delay);

}

Esta función se desvanece el color de fondo de la página estableciendo la propiedad CSS "bgColor" para el color actual. La declaración final en la función llama a la función varias veces hasta que el color de fondo alcanza el color final. Cada vez que se llama a la función, que disminuye el valor de el color actual por el valor definido en la variable "incremento". El resultado neto produce el efecto de desvanecimiento, donde el color se desvanece el color de su partida para el color final.

4 Copia y pega el siguiente función JavaScript debajo del código que se muestra en el paso anterior:

función getHexVal (colorVal) {

validChars var = "0123456789ABCDEF"

si (colorVal> 255) {

colorVal = "255";

}

var = hexCharacter1 Math.floor (colorVal / 16);

var = hexCharacter2 colorVal% 16;

var hexVal = validChars.charAt (hexCharacter1) + validChars.charAt (hexCharacter2);

volver hexVal;

}

window.onload = function () {

fadeBackground();

} </ Script>

La función "fadeBackground" llama a esta función "getHexVal". La función "getHexVal" convierte los valores de color decimales a hexadecimal. Las dos últimas líneas de código son los más importantes. Ellas hacen que el navegador para ejecutar todo lo que cada vez que se carga la página Web.

5 Guarde el archivo y abrirlo en un navegador. Su página web aparece y desaparece de su color inicial a blanco.

Consejos y advertencias

• Visitar un sitio web de tutorial de color HTML para aprender más sobre cómo funcionan los colores hexadecimales. A continuación, puede cambiar los valores de "candelita", "greenStart" y "blueStart" a cualquier cosa que te gusta. Por ejemplo, para cambiar su color de partida a verde, establecer el valor de "greenStart a" 0xFF "y el valor de los otros dos colores a" 0x00 ". Hacer que el color final negro en lugar de blanco al cambiar el valor de" EndColor " a "# 000000";
• Ajuste los valores de "incremento" y "retardo" para afinar el efecto de atenuación y lograr la transición que desee. La disminución del valor de "incremento" produce un efecto de transición de color más suave, pero también hace que el efecto de tomar más tiempo para completar. La reducción del valor de "retardo" acelera la transición.