Ben's Hobbyhoekje -- Achtergrondkleur fade-in / fade-out II: aanpak met CSS

Achtergrondkleur fade-in / fade-out II: aanpak met CSS

Deze pagina begint lichtgeel. Als de hele pagina in de browser is geladen vloeit de kleur over in paars-blauw.
De code om dit te bereiken wordt hier besproken.

De code staat onderaan deze bladzijde. Je kunt hem ook downloaden.

Dit is een modernere versie van Achtergrondkleur fade-in / fade-out.
Het verschil is dat de kleur van de achtergrond wordt geregeld via CSS en niet via het attribuut bgcolor van de <BODY>-tag.
Alleen de CSS-eigenschap background-color wordt gebruikt/aangepast. Omdat dit voor de hele <body> van het document geldt, bevat het document een <style>-block met daarin:

body {background-color:#......}
De <body> heeft het attribuut id="Boddie", waarmee het gemakkelijk door JavaScript kan worden benaderd.
De overvloei-actie op deze pagina wordt gestart met de event-handler onload="FadeIn('Boddie')" in de <body>-tag.

De JavaScript code staat in de file fadein2.js. Deze moet voor gebruik worden aangepast, en wel als volgt:

Variabele		Betekenis
col_begin		Begin-kleur; 6 hexadecimale cijfers, voorafgegaan door #
col_end		Eind-kleur; 6 hexadecimale cijfers, voorafgegaan door #
fade_steps		Aantal stappen waarmee de kleuren in elkaar overvloeien. Een kleiner getal betekent een hogere overvloei-snelheid. Hier: 50.
fade_interval		Tijdsduur tussen twee opeenvolgende overvloeistappen, in milliseconden. Hier: 40.

Verder aanpassen van de code is niet nodig.
In de variabelen col_begin en col_end moeten beslist hexadecimale codes worden ingevuld. Gebruik van "key-words" zoals RED, yellow en blue is niet mogelijk.
Voor de betekenis van de kleurcodes wordt verwezen naar het item Kleurcodes voor tekst, links en achtergrond.
De tijdsduur van het overvloei-effect is (ongeveer) gelijk aan

tijdsduur = fade_steps x fade_interval / 1000 [seconden]

Het effect op deze bladzijde duurt ongeveer 50 x 40 / 1000 = 2 sec.
De werking van het script is -globaal- als volgt:
- De kleurcodes van begin- en eindkleur worden gesplitst in afzonderlijke RGB-waarden.
- De hexadecimale waarden worden omgerekend naar het decimale stelsel. Zie ook het item Getallen omzetten van Decimaal naar Hexadecimaal en terug.
- Het verschil van de begin- en eindkleur wordt verdeeld in fade_steps stapjes.
- Bij elk stapje wordt de hexadecimale RGB-waarde terug gerekend. Deze wordt gebruikt om de achtergrondkleur te veranderen. Dat gebeurt met document.getElementById('Boddie').style.backgroundColor.

Er zijn twee functions beschikbaar voor het daadwerkelijke effect:
- FadeIn(ident): Kleurverloop van col_begin naar col_end.
- FadeOut(indent): Kleurverloop van col_end naar col_begin.
- De parameter ident is de naam van het id van de <BODY>.
  Hier is dat: "Boddie".

Gebruik:

De code staat in de <HEAD>.
De functions FadeIn(ident) en FadeOut(ident) kunnen worden geactiveerd met behulp van bijvoorbeeld buttons, in de <body>
De function FadeIn() kan ook worden geactiveerd door de event-handler onload="FadeIn(ident)" in de <BODY>-tag.
Gebruik van FadeOut(ident) heeft geen zin op het moment dat de pagina wordt verlaten (bijvoorbeeld met onunload="FadeOut(ident)"). De function kan zijn werk niet afmaken door het laden van de volgende bladzijde. Je ziet dus geen effect.
De parameter ident van FadeIn() en FadeOut() wordt in de tekst hierboven beschreven.
De achtergrondkleur van de <body>-tag (in de CSS) wordt het beste gelijk gemaakt aan col_begin. Het moet in elk geval aanwezig zijn.

De code ziet er als volgt uit:

(Zet dit JavaScriptje en dit Style-block in de <HEAD>)

<style>body {background-color:#E4E9F6}</style>
<script src="fadein2.js"></script>

(Neem desgewenst deze attributen op in de <BODY>-tag)

onLoad="FadeIn('Boddie')" id="Boddie"

Downloaden:

Druk op de knop: File: voorb313.zip, 1507 bytes.

Opmerking:

De hier gebezigde aanpak kan is ook zonder CSS te realiseren, dus alleen met JavaScript. Dat heeft echter niet de voorkeur. Zie het item Achtergrondkleur fade-in / fade-out.

Ook hier geldt: Wees voorzichtig met de toepassing. Maak de snelheid niet te hoog (combinatie van fade_steps en fade_interval) want dan zie je het effect niet meer. Als het effect echter te lang duurt jaag je je bezoekers weg.