Achtergrondkleur fade-in / fade-out
Deze pagina begint lichtgeel. Als de hele pagina in de browser is geladen vloeit de kleur over in paars-blauw.
Het JavaScript waarmee dit wordt gedaan wordt hier besproken.
De code staat onderaan deze bladzijde. Je kunt hem ook downloaden.
- De code staat in de file fadein.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.bgcolor.
- Er zijn twee functions beschikbaar voor het daadwerkelijke effect:
- fadein(): Kleurverloop van col_begin naar col_end.
- fadeout(): Kleurverloop van col_end naar col_begin.
Gebruik:
- De code staat in de <HEAD>.
- De functions fadein() en fadeout() kunnen worden geactiveerd met behulp van bijvoorbeeld buttons, in de <body>
- De function fadein() kan ook worden geactiveerd door de event-handler onload="fadein()" in de <body>-tag.
- Gebruik van fadeout() heeft geen zin op het moment dat de pagina wordt verlaten (bijvoorbeeld met onunload="fadeout()"). De function kan zijn werk niet afmaken door het laden van de volgende bladzijde. Je ziet dus geen effect.
- Het attribuut bgcolor van de <body>-tag wordt het beste gelijk gemaakt aan col_begin. Het mag ook worden weggelaten.
(Zet dit JavaScriptje in de <HEAD>)
<script src="fadein.js"></script>(Neem desgewenst dit attribuut op in de <BODY>-tag)
onLoad="fadein()"
Downloaden:
Druk op de knop:
File: voorb035.zip, 1636 bytes.
Opmerking:
De hier gebezigde aanpak werkt niet als je de achtergrondkleur hebt ingesteld met een CSS-stylesheet. Het is met CSS
en JavaScript echter ook te realiseren. Zie het item Achtergrondkleur
fade-in / fade-out II: aanpak met CSS. Dat heeft de voorkeur. De hier besproken benadering is vooral geschikt
voor wat oudere websites die geen of nauwelijks CSS gebruiken..
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.
