Hvordan laver Fading baggrunde i HTML og CSS

Farver berige nettet og gøre det levende. Jupiterimages / Comstock / Getty Images

Du behøver ikke Flash eller tredjeparts plug-ins til at imponere besøgende.CSS og JavaScript gøre det muligt for dig at generere farverige animationer og visuelle effekter inde i en brugers browser.En måde at gøre dit website skiller sig ud er at falme en webside baggrund, når en bruger indtaster dit websted.Dette er en gammel HTML effekt, men det kan stadig tiltrække sig opmærksomhed fra digitale publikum overalt.

Instruktioner

  1. Åbn en af ​​dine HTML dokumenter ved hjælp en HTML editor eller Notesblok.

  2. Indsæt følgende JavaScript-kode i dokumentets afsnit "hoved":

    & lt; script language = "javascript" type = "text / javascript" & gt;

    var Rødstjert = 0xFF;

    var greenStart = 0x00;

    Var blueStart = 0x00;

    var endColor = "#FFFFFF";/ hvid /

    var tilvækst = 10;

    var forsinkelse = 80;

    var keeprunning = true;

    De første tre variable definerer gæsterne farve webstedet se, når de åbner din side.En browser behov tre farveværdi

    er til at producere en farve: Rød, grøn og blå.De tre variable, "Rødstjert," "greenStart" og "blueStart" repræsenterer disse tre farver.Hver farve har en hexadecimal værdi.Hex værdi "Rødstjert," for eksempel, er "0xFF."Ignorer de første to "0x" tegn.De sidste to tegn, "FF" er vigtige.De repræsenterer den faktiske farve."FF" svarer til 255 i decimal notation.

    Hex farveværdier begynder med 00 og øge hele vejen op til 255. Jo større værdi, jo mere intens, at bestemt farve vises.I dette eksempel den røde farve, defineret ved "Rødstjert," er det største.Dens hex værdi "FF".De sekskantede værdier af "greenStart" og "blueStart" variable er både "00."Disse tre farveværdier producere en farve, der indeholder intet andet end rødt.Besøgende vil se røde kort, før det svinder til hvid.

    Den "endColor" variabel definerer sidens endelige farve.I dette eksempel, at farven er hvid.Den "tilvækst" og "forsinkelse" variabel bestemmer, hvor hurtigt fade animationen opstår, og hvordan glat, at animationen vises.

  3. Indsæt denne kode under koden vist i det forrige trin:

    funktion fadeBackground () {

    var prefix = "#";

    var baggrundsfarve = præfiks + getHexVal (Rødstjert) + getHexVal (greenStart) + getHexVal (blueStart);

    document.bgColor = baggrundsfarve;

    Rødstjert + = tilvækst;

    greenStart + = tilvækst;

    blueStart + = tilvækst;

    hvis (baggrundsfarve == endColor)

    keeprunning = false;

    ellers

    setTimeout (fadeBackground, forsinkelse);

    }

    Denne funktion svinder sidens baggrundsfarve ved at indstille CSS "bgColor" ejendom til den aktuelle farve.Den endelige opgørelse i funktionen kalder den funktion, indtil baggrundsfarven når slutningen farve.Hver gang det kalder funktionen, det nedsætter værdien af ​​den aktuelle farve af værdien defineret i "trin" variabel.Nettoresultatet producerer fade effekt, hvor baggrunden svinder fra sit udgangspunkt farve til den slutter farve.

  4. Kopier og indsæt følgende JavaScript-funktionen under koden vist i forrige trin:

    funktion getHexVal (colorVal) {

    Var validChars = "0123456789ABCDEF"

    hvis (colorVal & gt; 255) {

    colorVal = "255 ";

    }

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

    var hexCharacter2 = colorVal% 16;

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

    returnere hexVal;

    }

    window.onload = function () {

    fadeBackground ();

    } & lt; / script & gt;

    Den "fadeBackground" funktionen kalder dette "getHexVal" funktion.Den "getHexVal" -funktionen konverterer decimal farveværdier til hex.De sidste to linjer kode er de vigtigste.De forårsager browseren til at køre alt, når din webside belastninger.

  5. Gem filen og åbne den i en browser.Din webside vises, og svinder fra din start farve til hvid.

Tips & amp;Advarsler

  • Besøg en HTML farve tutorial hjemmeside for at lære mere om, hvordan hexadecimale farver virker.Du kan derefter ændre værdierne af "Rødstjert," "greenStart" og "blueStart" til noget, du kan lide.For eksempel, for at ændre dit udgangspunkt farve til grøn, sæt værdien af ​​"greenStart til" 0xFF ", og værdien af ​​de to andre farver til" 0x00. "Gør det slutter farven sort i stedet for hvid ved at ændre værdien af" endColor "til "# 000000"
  • Juster værdier for "stigning" og "forsinkelse" for at finindstille fade effekt og opnå overgangen du ønsker Reducering af værdien af ​​"tilvækst" producerer en jævnere farveovergang effekt, men det medfører også.. effekten til at tage længere tid at gennemføre Reducering af værdien af ​​"forsinkelse" fremskynder overgangen

Ressourcer

  • W3Schools:. HTML Farver
281
0
1
Html