Kuidas teha Fading taustaga HTML ja CSS

Värvid rikastavad Web ja teha elavaks . Jupiterimages / Comstocki / Getty Images

Sa ei pea Flash või kolmanda osapoole pluginaid muljet veebilehe külastajad.CSS ja JavaScript võimaldab teil luua värvikas animatsioone ja visuaalseid efekte sees kasutaja brauser.Üks võimalus teha oma kodulehel välja paistma ei tuhmuma veebilehe tausta, kui kasutaja sisestab saidile.See on vana HTML mõju, kuid see võib siiski tähelepanu äratamiseks digitaalse publikut kõikjal.

juhised

  1. Open ühe oma HTML dokumente kasutades HTML editor või Notepad.

  2. kleepige järgnev JavaScripti koodi dokumendi "head" sektsiooni:

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

    var lepalind = 0xFF;

    var greenStart = 0x00;

    var blueStart = 0x00;

    var endColor = "#ffffff";/ valge /

    var juurdekasvu = 10;

    var viivitus = 80;

    var keepRunning = true;

    Esimesed kolm muutujat määratleda värvi külastajad näevad avada oma lehele.Brauser vajab kolme värvi väärtusi toota värvi: punane, roheline ja sinine.Kolm muutujad, "le

    palind", "greenStart" ja "blueStart" esindavad need kolm värvi.Iga värv on kuueteistkümnendväärtus.HEX väärtus "lepalind" on näiteks "0xFF."Ignoreeri kaks esimest "0x" tegelased.Viimased kaks märki, "FF" on oluline.Nad esindavad tegelikku värvi."FF" on samaväärne 255 numbritena.

    Hex värvi väärtused algavad 00 ja suurendab kogu tee kuni 255. Mida suurem väärtus, seda intensiivsem selle värvi tundub.Selles näites on punasele poolt määratletud "lepalind" on suurim.Selle hex väärtus on "FF".HEX väärtused "greenStart" ja "blueStart" muutujad on nii "00."Need kolm värvi väärtusi toota värv, mis sisaldab vaid punane.Saidi külastajad näevad punane korraks enne seda valgeks.

    "endColor" muutuja piirab lehel lõpliku värvi.Sel juhul on see värv valge.NN "juurdekasv" ja "hilinemine" muutuja määrata, kui kiiresti tuhmuma animatsiooni toimub ja kuidas sile, et animatsioon ilmub.

  3. Kleebi see turvakood kood näidatud eelmises samm:

    funktsiooni fadeBackground () {

    var eesliide = "#";

    var BackgroundColor = eesliide + getHexVal (lepalind) + getHexVal (greenStart) + getHexVal (blueStart);

    document.bgColor = BackgroundColor;

    lepalind + = juurdekasvu;

    greenStart + = juurdekasvu;

    blueStart + = juurdekasvu;

    kui (BackgroundColor == endColor)

    keepRunning = false;

    teine ​​

    setTimeout (fadeBackground viivitus);

    }

    See funktsioon kaob lehe taustavärvi seades CSS "bgColor" vara praegune värv.Lõplik avaldus funktsioon nõuab funktsiooni korduvalt, kuni taustavärvi jõuab lõpuks värvi.Iga kord, kui ta nõuab funktsiooni, see vähendab väärtust praegune värv, väärtus on määratletud "juurdekasvu" muutuja.Lõpptulemusena toodab fade mõju, kui taustal kaob selle lähtekohaks värvi lõpetades värvi.

  4. Kopeeri ja kleebi järgmine JavaScript funktsioon allpool kood näidatud eelmises samm:

    funktsiooni getHexVal (colorVal) {

    var validChars = "0123456789ABCDEF"

    kui (colorVal & gt; 255) {

    colorVal = "255 ";

    }

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

    var hexCharacter2 = colorVal% 16;

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

    tagasi hexVal;

    }

    window.onload = funktsiooni () {

    fadeBackground ();

    } & lt; / script & gt;

    "fadeBackground" funktsioon nõuab selle "getHexVal" funktsiooni.NN "getHexVal" teisendab kohaga värviväärtused hex.Kaks viimast rida koodi on kõige olulisem.Nad põhjustavad brauseri joosta kõike, kui teie veebileht koormusi.

  5. Salvesta fail ja avage brauseris.Veebilehe ilmub ja kaob oma alustades värv valge.

Tips & amp;Hoiatused

  • Külasta HTML värvi juhendaja kodulehel rohkem teada, kuidas kuueteistkümnendsüsteemis värvid tööd.Seejärel saab muuta väärtused "lepalind", "greenStart" ja "blueStart" midagi soovid.Näiteks selleks, et muuta oma alustades roheliseks, määrata väärtus "greenStart et" 0xFF "ja väärtus teised kaks värvi" 0x00. "Tee lõpeb musta värvi asemel valge muutes väärtus" endColor "to "# 000000";
  • Reguleerige väärtused "juurdekasv" ja "hilinemine" häälestada fade mõju ja saavutada üleminek sa soovid. Vähenev väärtus "juurdekasvu" toodab sujuvam värviüleminekus mõju, kuid see põhjustab katoime võtta kauem aega. Vähendades väärtus "hilinemine" kiirendab üleminekut.

Resources

  • W3Schools: HTML Värvid
298
0
1
Html