Laadscherm met vollopende tekst

Hieronder zie je een venster met daarin de zwarte letter B. De letter wordt van onderen gevuld met een rode kleur, waar ook nog een verloop in zit. Het is alsof de letter volloopt met een vloeistof. Zodra de letter (bijna) vol is, vloeit de achtergrond over van geel naar groen, verdwijnt de B en verschijnt de tekst "Welkom op mijn site".
Ververs de pagina om het effect nog een keer te zien.

Op deze pagina wordt uit de doeken gedaan hoe je dit maakt. De code kun je downloaden om zelf te gebruiken.

Dit is een bewerking van een voorbeeld uit het blad Webdesigner Magazine nr. 97 (augustus 2017) pagina 72 en 73.
Dit blad wordt sinds eind november 2017 niet meer gemaakt.
Voor deze website heb ik het voorbeeld een beetje opgepimpt. Een klein onvolkomenheidje in de CSS is verbeterd, zodat het ook acceptabel werkt met oudere versies van Edge.

Het werkt niet lekker met oudere versies van Edge. Daar knippert de achtergrond van de letter gedurende de eerste helft van de animatie. De reden daarvoor is niet duidelijk. In de nieuwere versies van Edge (met Chromium) werkt het prima.

Het voorbeeld wordt op deze pagina getoond in een inline frame (<iframe>). Het voorbeeld werkt ook zelfstandig, klik HIER.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• De werking van het script
• De code van het voorbeeld bestaat uit HTM, CSS (in de file styles.css) en JavaScript.
   
• HTML
• De HTML bestaat uit een enkele <div>-tag die dient als container voor het tonen van het effect.
• Binnen deze <div> is er één <span>-tag waar de tekst (die volloopt) in staat.
• Na de <div> volgt er een <article> waar de content van de bladzijde in staat. In het voorbeeld is dat alleen een <h2> met de tekst "Welkom op mijn site".
   
• CSS
• De CSS is het belangrijkste deel van het voorbeeld. Het vullen van de letter met kleur en het overvloeien naar de 'echte' content gebeurt hier. Alleen het moment waarop het overvloeien begin wordt bepaald door JavaScript.
• Het voorbeeld is een zelfstandig HTML-bestand. Daarom begint de CSS met het opmaken van de body. De breedte en hoogte worden ingesteld op 100%. De binnen- en buitenmarges worden op nul gezet. Het lettertype, de achtergrondkleur en de tekstkleur worden ingesteld. Feitelijk is dit een CSS-reset.
• Daarna worden er instellingen gemaakt voor h2. Dit wordt gebruikt voor de tekst "Welkom op mijn site".
• Nu is de vollopende letter aan de beurt. De selector is body > *:nth-child(1). Dit staat voor het eerste element in de body. In dit geval is dat de <div>-tag, de container voor het effect. Die wordt absoluut gepositioneerd in de linker bovenhoek. Het ligt bovenop alle andere elementen (z-index is heel groot). De achtergrondkleur is lichtgeel, de tekst is transparant.
• De afmetingen worden bepaald met width: 100vw. Dat betekent dat de breedte 100% is van de beschikbare breedte van het window. De letterhoogte is 90vh, dat wil zeggen 90% van de hoogte van het window.
• Nu is het span-element binnen de div aan de beurt. Daar wordt de animatie voorbereid.
  •   Als eerste wordt de achtergrond ingesteld. Er is zowel een achtergrondafbeelding (gradient.png) als een achtergrondkleur (zwart).
  •   De letter is transparant gemaakt met -webkit-text-fill-color: transparent;. De achtergrond is alleen te zien door de letter heen. Dat wordt gedaan met -webkit-background-clip: text;. In beide gevallen is de vendor-prefix -webkit- nodig om te zorgen dat het in alle grote browsers goed werkt. De achtergrond wordt tijdens de animatie steeds hoger gemaakt. Daarom is de afbeelding hier onderaan gepositioneerd.
  •   display:block is nodig omdat <span> van zichzelf een inline-element is.
  •   De animatie werkt met @keyframes. Die heeft de naam loading en duurt 20 seconden. Aan het einde van de animatie wordt de laatste toestand vastgehouden (met forwards).
• De @keyframes loading zet de hoogte van de achtergrondafbeelding op 20% en laat die groeien tot 100%. Op zie manier lijkt het of de achtergrond naar boven wordt geschov n. De breedte is en blijft 100%.
• Zodra de pagina is geladen krijgt de body de klasse loaded. Dat wordt geregeld door JavaScript.
  Zodra de body de klasse loaded heeft gekregen wordt CSS actief via de selectorbody.loaded > *:nth-child(1). Dat betekent dat er iets met de <div>-tag gaat gebeuren: Er wordt een animatie gestart die de doorzichtigheid van de letter op de gele achtergrond laat veranderen van 1 (zichtbaar) naar 0 (helemaal transparant. Tevens worden de letter met achtergrond verplaatst naar links buiten het window: left: -100vw.
• De animatie heeft de naam fade en duurt 2 seconden. Aan het einde van de animatie wordt de laatste toestand vastgehouden (met forwards).
   
• JavaScript
• Met behulp van JavaScript wordt het effect afgebroken en wordt de "echte" content zichtbaar gemaakt. Dat gaat via een event-listener die actief wordt als de pagina is geladen (hetzelfde als onload=" … " in de <body>-tag).
• Als de pagina is geladen wordt aan de body de klasse loaded toegevoegd. Let hierbij op de spelling: vóór en ná het woord "loaded" staat een spatie. Dat is om te voorkomen dat de verschillende klassen in className aan elkaar vast komen te staan. Dat kan vreemde zij-effecten geven.
   
• In het voorbeeld wordt met behulp van setTimeout() gesimuleerd dat het laden van de pagina 8 seconden duurt. In de productieversie van je site gebruik je alleen de regel document.body.className += " loaded ";.
   
• Toepassen in je eigen site
• Download de .zip-file en pak hem uit. Maak een <iframe> in je document zoals hieronder is aangegeven. Je hebt nu een werkend voorbeeld zoals op deze pagina.
• Je kunt het voorbeeld ook als zelfstandige webpagina laten werken. In dat geval hernome je de file html580a.htm naar index.html of iets dergelijks
• Pas de kleuren in de CSS aan, aan je eigen wensen. Vervang de letter B door iets wat je zelf wilt. Verklein zo nodig de font-size (staat nu op 90vw).
• In de <article>-tag zet je de content van je document neer.
• Vervang desgewenst de achtergrond gradient.jpg door een andere.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<link rel="stylesheet" href="styles.css">
<script>
window.addEventListener("load", function(){
  setTimeout(function(){
    document.body.className += " loaded ";
  },8000);
});
</script>

(Zet dit in de <BODY>).

<div>
  <span>B</span>
</div>

<article>
  <h2>Welkom op mijn site</h2>
</article>

(Deze code is voor een <IRAME>).

<iframe height="500" width="600" src="html580a.htm"
  scrolling="no">Helaas, uw browser ondersteunt geen IFRAME.</iframe>

Downloaden:
 
Druk op de knop:  File: voorb580.zip, 2581 bytes.