Degradê de cor Javascript

Script para conseguir um degrade da cor de fundo da página web. Um exemplo é simples e o outro, mais complexo, se adapta a muitos degrades diferentes.

Vamos ver um exemplo típico de efeito especial em uma página web: um degrade de cores para o fundo da página.

O degrade consiste em mudar a cor de fundo da página aos poucos para ir se aproximando à outra cor. Podemos fazer muitos degrades diferentes para páginas web com pouco esforço, poucos conhecimentos técnicos e bastante imaginação.

Pode-se ver um exemplo de degrade em uma página a parte, para ter uma idéia exata do que vamos explicar neste artigo. Ademais, no final do artigo, veremos um script que permite fazer uma ampla gama de degrades, como este exemplo de degrade mais complexo.

Complicação do degrade

A maior complicação que encontramos na hora de criar um script para fazer um degrade é que as cores se expressam em hexadecimal e em Javascript trabalhamos com números decimais. De modo que, para converter nossos números decimais em hexadecimais e poder assim utiliza-los para indicar cores criamos uma função especial:

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

A função devolve o número passado por parâmetro em forma hexadecimal. Por exemplo, se recebe 140 devolve 8C. Se recebe 15 devolve 0F.

Para isso, temos a ajuda de um Array criado anteriormente que salva conversão de números decimais a hexadecimais das unidades básicas, ou seja, do 0 à letra F. Esta é a linha que cria o Array.

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

A função primeiro calcula os grupos de 16 que podem ser feitos a partir do número que recebemos. Os números destes grupos seriam as "hexa-dezenas".

Logo, calculamos o resto da divisão anterior, ou dito de outra forma, quantas unidades nos restam depois de tomar estas "hexa-dezenas". Este segundo número, serão as unidades. Ao juntar as unidades com os grupos de 16 que obtivemos, convertendo ambos valores por meio do array de conversão decimal a hexadecimal, conseguimos a conversão buscada.

Criando a seqüência de cores para o degrade

Uma vez que pudermos converter do valor decimal (necessário para levar a conta em Javascript) ao hexadecimal (necessário para indicar um cor) nossa única tarefa será contar em decimal as cores e converte-las a hexadecimal antes de mudar a propriedade document.bgColor, que como sabemos é a propriedade que salva a cor de fundo da página.

Quisemos fazer um primeiro exemplo muito simples para que possa ser entendido mais facilmente. O exemplo foi mostrado anteriormente em funcionamento. Trata-se de uma escala de cinzas que começa em preto e termina em branco.

cor_decimal = 0

Primeiro, iniciamos a variável cor_decimal, que é a que salva a cor atual a mostrar, em formato decimal. Só salvamos um valor da cor pois, ao ser uma escala de cinzas, todos os valores RGB são o mesmo.

Teremos uma função chamada degrade que será a encarregada de realizar a maior parte do trabalho.

function degrade(){
    cor_decimal ++
    cor_hexadecimal = converteHexadecimal(cor_decimal)
    document.bgColor = cor_hexadecimal + cor_hexadecimal + cor_hexadecimal

    //chamo com um atraso
    if (cor_decimal < 255)
       setTimeout("degrade()",1)
}

A função se encarrega de incrementar a cor_decimal em uma unidade, converte-la em hexadecimal e coloca-la dentro de propriedade document.bgColor para atualizar o fundo da página.

Finalmente, e nisso se baseiam muitos efeitos especiais de Javascript, se chama a função a si mesma com um atraso. No exemplo podemos ver que se a cor_decimal for menor de 255 (que é o máximo que se pode alcançar em cores) se chama à função com setTimeout, que é a que nos cria o atraso.

O código deste exemplo simples pode ser visto inteiro a seguir:

<html>
<head>
    <title>Exemplo de degrade 1</title>
</head>

<body bgcolor=000000>

<h1 align="center">Degradando...</h1>
<h2>Exemplo 1</h2>
Nesta página podemos ver um exemplo de degrade de preto a branco, com uma só passada. Só se vê o texto quando o fundo for suficientemente branco 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 converteHexadecimal(num){
    var hexaDec = Math.floor(num/16)
    var hexaUni = num - (hexaDec * 16)
    return hexadecimal[hexaDec] + hexadecimal[hexaUni]
}

cor_decimal = 0

function degrade(){
    cor_decimal ++
    cor_hexadecimal = converteHexadecimal(cor_decimal)
    document.bgColor = cor_hexadecimal + cor_hexadecimal + cor_hexadecimal

    //chamo com um atraso
    if (cor_decimal < 255)
       setTimeout("degrade()",1)
}

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

Se quisermos, também podemos ver o exemplo em funcionamento em uma página a parte.

Mais degrades

Provavelmente este não seja o exemplo mais útil para o leitor que deseja implementar um degrade em sua página, pois é um pouco simples e específico. Para solucionar este assunto, criamos um sistema onde ode se configurar o tipo de degrade da página com uma série de variáveis. É um exemplo que se baseia no que acabamos de ver, embora tenha muitas variáveis para parametrizar o comportamento do degrade e que se adapte às necessidades do desenvolvedor.

Por falta de tempo não vamos a explicar todo o script, iremos observar somente as variáveis que permitem configura-lo.

cor_inicio = new Array(150,150,255)

Com cor_incio configuramos a cor que se mostra ao princípio na página. Indicamos com um array, onde em cada campo, colocamos o valor decimal de cada um das três cores RGB.

cor_fim = new Array(255,99,0)

Com cor_fim configuramos a cor a qual vai tender nossa degrade, de maneira idêntica a como fizemos em cor_inicio

passos = 100

é o número de passos que vamos utilizar para alcançar o valor da cor final, desde a cor de início.

comportamento = 1

Esta variável serve para definir o comportamento do script em quatro possíveis valores:

Realiza um loop infinito desde a cor de início à cor fim e da cor fim à cor de início, para voltar a começar. E irá repetindo sempre.
Realiza uma passada desde a cor de início à cor fim. Termina quando acaba a passada.
Realiza uma passada da cor de início ao fim e uma volta desde o fim ao início. Termina quando realiza a ida e a volta.
Um loop infinito com uma parada de 10 segundos entre quando fez a ida e a volta, antes de voltar a começar outra ida e volta.

Exemplos de degrade completo: