Hoe te Fading achtergronden in HTML en CSS te maken

Kleuren verrijken de website en maken het leven komen . Jupiterimages / Comstock / Getty Images

Je hoeft geen Flash of van derden plug-ins om indruk te maken bezoekers van de website.CSS en JavaScript maakt het mogelijk voor u om kleurrijke animaties en visuele effecten in de browser van een gebruiker te genereren.Een manier om uw website te onderscheiden is om de achtergrond van een webpagina's verdwijnen wanneer een gebruiker uw site binnenkomt.Dit is een oude HTML-effect, maar het kan nog steeds de aandacht trekken van digitale publiek overal.

instructies

  1. Open een van uw HTML-documenten met behulp van een HTML-editor of Notepad.

  2. Plak de volgende JavaScript-code in de sectie van het document "kop":

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

    var Roodstaart = 0xFF;

    var greenStart = 0x00;

    var blueStart = 0x00;

    var endColor = "#FFFFFF";/ wit /

    var increment = 10;

    var delay = 80;

    var keepRunning = true;

    De eerste drie variabelen bepalen de bezoekers van kleur zien als ze uw

    pagina te openen.Een browser heeft drie kleurwaarden om een ​​kleur te produceren: rood, groen en blauw.De drie variabelen, "roodstaart," "greenStart" en "blueStart" vertegenwoordigen die drie kleuren.Elke kleur heeft een hexadecimale waarde.De hexadecimale waarde van "roodstaart," is bijvoorbeeld "0xFF."Negeer de eerste twee "0x" karakters.De laatste twee karakters, "FF" zijn belangrijk.Zij vertegenwoordigen de werkelijke kleur."FF" is het equivalent van 255 in decimale notatie.

    Hex kleurwaarden beginnen met 00 en verhoog helemaal tot 255. Hoe groter de waarde, hoe intenser die bepaalde kleur weergegeven.In dit voorbeeld is de rode kleur, gedefinieerd door "redstart," is het grootste.De hexadecimale waarde "FF."De hex waarden van de "greenStart" en "blueStart" variabelen zijn zowel "00."Deze drie kleurwaarden produceren een kleur die alleen maar rode bevat.Bezoekers van de site zal rood kort zien voordat het vervaagt naar wit.

    De "endColor" variabele definieert de pagina's uiteindelijke kleur.In dit geval is dat de kleur is wit.De "increment" en "vertraging" variabele bepalen hoe snel de fade animatie optreedt en hoe glad dat de animatie verschijnt.

  3. Plak deze code onder de code die in de vorige stap:

    functie fadeBackground () {var

    prefix = "#";

    var backgroundColor prefix = + getHexVal (Roodstaart) + getHexVal (greenStart) + getHexVal (blueStart);

    document.bgColor = backgroundColor;

    Roodstaart + = toename;

    greenStart + = toename;

    blueStart + = toename;

    if (backgroundColor == endColor)

    keepRunning valse =;

    anders

    setTimeout (fadeBackground, delay);

    }

    Deze functie verdwijnt van de pagina achtergrondkleur door de CSS "bgColor" woning aan de huidige kleur.De definitieve afrekening in de functie noemt de functie totdat de achtergrondkleur het einde kleur bereikt.Elke keer dat de functie noemt, het verlaagt de waarde van de huidige kleur van de in de "increment" variabele waarde.Het netto resultaat produceert de fade-effect, waar de achtergrond verdwijnt uit zijn startpositie kleur aan het beëindigen van kleur.

  4. Kopieer en plak de volgende JavaScript-functie onder de code die in de vorige stap:

    functie getHexVal (colorVal) {

    var validChars = "0123456789ABCDEF"

    if (colorVal & gt; 255) {

    colorVal = "255 ';

    }

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

    var hexCharacter2 = colorVal% 16;

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

    terug hexVal;

    }

    window.onload = function () {

    fadeBackground ();

    } & lt; / script & gt;

    De functie "fadeBackground" noemt deze functie "getHexVal".De functie "getHexVal" zet decimale kleurwaarden naar hex.De laatste twee regels code zijn de belangrijkste.Ze veroorzaken de browser om alles wanneer uw webpagina laadt draaien.

  5. Sla het bestand en open het in een browser.Webpagina verschijnt en verdwijnt uit je beginnen kleur wit.

Tips & amp;Waarschuwingen

  • Bezoek een HTML-kleur leerprogramma website voor meer informatie over hoe de hexadecimale kleuren werken leren.Vervolgens kunt u de waarden van "roodstaart," "greenStart" en "blueStart" om alles wat je wilt.Bijvoorbeeld, uw startpunt kleur veranderen naar groen, de waarde van "greenStart naar" 0xFF "en de waarde van de andere twee kleuren" 0x00. "Maak het beëindigen van kleur zwart in plaats van wit door het veranderen van de waarde van de" endColor "naar "# 000000";
  • Pas de waarden voor "increment" en "vertraging" te fine-tunen van de fade-effect en de overgang die u wenst te bereiken verlagen van de waarde van de "increment" produceert een soepeler kleur overgang effect, maar het veroorzaakt ook.. het effect langer duren Het verminderen van de waarde van de "vertraging" versnelt de overgang

Resources

  • W3Schools. HTML Kleuren
626
0
1
Html