Hvordan lage Fading bakgrunner i HTML og CSS

Hvordan lage Fading bakgrunner i HTML og CSS


Du trenger ikke Flash eller tredjeparts plug-ins for å imponere nettstedet besøkende. CSS og Javascript gjør det mulig for deg å generere fargerike animasjoner og visuelle effekter inne i en brukers nettleser. En måte å gjøre nettstedet ditt skiller seg ut er å falme en webside bakgrunn når en bruker skriver inn ditt nettsted. Dette er en gammel HTML effekt, men det kan fortsatt tiltrekke seg oppmerksomheten til digitale publikum overalt.

Bruksanvisning

1 Åpne en av HTML-dokumenter ved hjelp av en HTML-editor eller Notisblokk.

2 Lim inn følgende Javascript-kode i dokumentet er "head" -seksjonen:

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

Var redstart = 0xFF;

Var greenStart = 0x00;

Var blueStart = 0x00;

Var endColor = "#FFFFFF"; /

Hvit /

Var tilvekst = 10;

Var forsinkelse = 80;

Var keepRunning = true;

De tre første variablene definere farge besøkende ser når de åpner siden din. En nettleser trenger tre fargeverdiene til å produsere en farge: rød, grønn og blå. De tre variablene, "redstart", "greenStart" og "blueStart" representerer de tre fargene. Hver farge har en heksadesimal verdi. Hex verdien "redstart," for eksempel, er "0xFF." Ignorer de første to "0x" tegn. De to siste figurer, "FF" er viktige. De representerer den faktiske fargen. "FF" er tilsvarende 255 i titallssystemet.

Hex fargeverdiene begynne med 00 og øke helt opp til 255. Jo større verdi, jo mer intens at bestemt farge vises. I dette eksempel er rød farge, som er definert ved "redstart", er den største. Dens hex verdien er "FF". De hex verdier av "greenStart" og "blueStart" variabler er både "00" Disse tre fargeverdiene produsere en farge som ikke inneholder annet enn rødt. Besøkende vil se rødt kort før det blekner til hvitt.

Den "endColor" variabelen definerer sidens endelige fargen. I dette tilfellet er det hvit farge. Den "tilvekst" og "forsinkelse" variable bestemme hvor fort fade animasjon oppstår og hvor glatt at animasjon vises.

3 Lim inn denne koden under koden vist i forrige trinn:

fungere fadeBackground () {

Var prefix = "#";

Var bakgrunnsfarge = prefiks + getHexVal (redstart) + getHexVal (greenStart) + getHexVal (blueStart);

document.bgColor = bakgrunnsfarge;

redstart + = økning;

greenStart + = økning;

blueStart + = økning;

if (bakgrunnsfarge == endColor)

keepRunning = false;

ellers

setTimeout(fadeBackground, delay);

}

Denne funksjonen tones sidens bakgrunnsfarge ved å sette CSS "bgcolor" eiendom til gjeldende farge. Den siste setningen i funksjonen kaller funksjonen gjentatte ganger til bakgrunnsfargen når slutten farge. Hver gang det kaller funksjonen, men senker verdien av den aktuelle farge med den verdien som er definert i "inkrement" variable. Nettoresultatet produserer fade effekt der bakgrunnen blekner fra sin start farge til slutt farge.

4 Kopier og lim inn følgende Javascript-funksjonen under koden vist i forrige trinn:

funksjon getHexVal (colorVal) {

Var validChars = "0123456789ABCDEF"

if (colorVal> 255) {

colorVal = "255";

}

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

Var hexCharacter2 = colorVal% 16;

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

tilbake hexVal;

}

window.onload = function () {

fadeBackground();

} </ Script>

Den "fadeBackground" -funksjonen kaller dette "getHexVal" -funksjon. Den "getHexVal" funksjonen konverterer desimaltall fargeverdiene til hex. De to siste linjer med kode er de viktigste. De forårsaker nettleseren for å kjøre alt når Web siden lastes.

5 Lagre filen og åpne den i en nettleser. Web-siden vises og forsvinner fra start farge til hvit.

Hint

  • Besøk en HTML farge tutorial nettsted for å lære mer om hvordan heksadesimale farger fungerer. Deretter kan du endre verdiene for "redstart", "greenStart" og "blueStart" til noe du liker. For eksempel, for å endre start farge til grønt, sett verdien av "greenStart til" 0xFF "og verdien av de to andre farger for å" 0x00 ". Gjør det slutt fargen svart i stedet for hvitt ved å endre verdien av" endColor " til "# 000000";
  • Juster verdiene for "økning" og "forsinkelse" for å finjustere fade effekt og oppnå overgangen du ønsker. Reduksjon av verdien av "tilveksten" gir et jevnere fargeovergangseffekt, men det fører også effekten til å ta lengre tid å fullføre. Redusere verdien av "forsinkelse" raskere overgang.