Miten saada Fading Taustat HTML ja CSS

Värit rikastuttaaWeb ja tehdä siitä hengissä . Jupiterimages / Comstock / Getty Images

Sinun ei tarvitse Flash tai kolmannen osapuolen laajennuksia vaikutuksen verkkosivuilla kävijät.CSS ja JavaScript ansiosta voit luoda värikäs animaatioita ja visuaalisia efektejä sisällä käyttäjän selaimen.Yksi tapa tehdä sivustosi erotuttava on häivyttää Web-sivun taustan kun käyttäjä saapuu sivuston.Tämä on vanha HTML vaikutus, mutta se voi silti houkutella huomiota digitaalisten yleisöille kaikkialla.

Ohjeet

  1. Avaa yksi HTML-dokumentteja HTML-editorin tai Muistioon.

  2. Liitä seuraava JavaScript-koodin asiakirjan "pää" osassa:

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

    var Leppälintu = 0xFF;

    var greenStart = 0x00;

    var blueStart = 0x00;

    var endColor = "#FFFFFF";/ valkoinen /

    var lisäys = 10;

    var viive = 80;

    var keepRunning = true;

    ensimmäinen kolme muuttujaa määritellä väri sivuston kävijät näkevät avaa sivun.Selain tarvitsee kolme väriarvot tuottamaan väri: punainen, vihreä ja sininen.Ko

    lme muuttujaa, "leppälintu," "greenStart" ja "blueStart" edusta kolme väriä.Jokaisella värillä on heksadesimaaliarvo.Hex arvo "Leppälintu," esimerkiksi on "0xFF."Sivuuttaa kaksi ensimmäistä "0x" merkkiä.Viimeiset kaksi merkkiä, "FF" ovat tärkeitä.Ne edustavat todellinen väri."FF" on sama kuin 255 lukuna.

    Hex väriarvot aluksi 00 ja lisätä kaikki tavalla jopa 255. Mitä suurempi arvo, sitä voimakkaampi että erityisesti väri tulee näkyviin.Tässä esimerkissä, punainen väri, on määritelty "Leppälintu," on suurin.Sen hex arvo on "FF."Hex arvot "greenStart" ja "blueStart" muuttujat ovat "00"Nämä kolme väriarvot tuottaa väri, joka sisältää vain punainen.Sivuston kävijät näkevät hetken punaisena, ennen kuin se haalistuu valkoiseen.

    "endColor" muuttuja määrittelee sivun lopullinen väri.Tässä tapauksessa, että väri on valkoinen."Lisäys" ja "viive" muuttuja määrittää, kuinka nopeasti häivyttää animaatio tapahtuu ja kuinka sileä että animaatio näyttää.

  3. Liitä tämä koodi alla koodi joka näkyy edellisessä vaiheessa:

    toiminto fadeBackground () {

    var etuliite = "#";

    var backgroundColor = etuliite + getHexVal (Leppälintu) + getHexVal (greenStart) + getHexVal (blueStart);

    document.bgColor = backgroundColor;

    Leppälintu + = lisäys;

    greenStart + = lisäys;

    blueStart + = lisäys;

    jos (backgroundColor == endColor)

    keepRunning = false;

    muu

    setTimeout (fadeBackground, viive);

    }

    Tämä toiminto haalistuu sivun taustaväri asettamalla CSS "bgcolor" kohde nykyisen värin.Lopullinen toteamus funktiokutsuja toiminto kunnes taustaväri loppuu väri.Joka kerta se kutsuu funktion, se pienentää arvoa nykyisen väri arvolla "lisäys" muuttuja.Nettotulos tuottaa häivyttää vaikutus jossa taustan haalistuu sen aloitusasennosta väriä päättyy värin.

  4. Kopioi ja liitä seuraava JavaScript-toiminto alla koodi joka näkyy edellisessä vaiheessa:

    toiminto getHexVal (colorVal) {

    var validChars = "0123456789ABCDEF"

    jos (colorVal & gt; 255) {

    colorVal = "255 ";

    }

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

    var hexCharacter2 = colorVal% 16;

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

    palata hexVal;

    }

    window.onload = function () {

    fadeBackground ();

    } & lt; / script & gt;

    "fadeBackground" toiminto kutsuu tätä "getHexVal" -toiminto."GetHexVal" funktio muuntaa desimaalin väriarvot hex.Kaksi viimeistä riviä koodia ovat tärkeimpiä.Ne aiheuttavat selaimen ajaa kaiken aina Web-sivu latautuu.

  5. Tallenna tiedosto ja avaa se selaimessa.Web-sivu avautuu ja haalistuu teidän alkaa väri valkoiseksi.

Vinkkejä & amp;Varoitukset

  • vierailu HTML väri opetusohjelma verkkosivuilla oppia lisää siitä, miten heksadesimaalimuodossa värit toimivat.Voit sitten muuttaa arvoja "Leppälintu," "greenStart" ja "blueStart" mihinkään haluat.Esimerkiksi vaihtaa alkaa vihreiksi, aseta arvo "greenStart ja" 0xFF "ja arvo kaksi muuta väriä" 0x00. "Tee päättyy väri musta valkoisen sijasta muuttamalla arvoa" endColor "ja "# 000000";
  • Säädä arvot "lisäys" ja "viive" hienosäätää häivyttää vaikutus ja saavuttaa siirtyminen haluat. Vähentämällä arvo "lisäys" tuottaa tasaisemman värin siirtymisen vaikutus, mutta se aiheuttaa myösvaikutus kestää kauemmin. vähentäminen arvo "viive" nopeuttaa siirtymistä.

Resurssit

  • W3Schools: HTML-värit
270
0
1
Html