Animatie tijdens het laden van een pagina
Als je website een applicatie moet opstarten vanaf de server, kan dat soms even duren. Omnde gebruiker dan niet op te zadelen met een leeg scherm, is een animatie een goed hulpmiddel om aan te geven dat er op de achtergrond iets gebeurt.
Op deze pagina wordt uit de doeken gedaan hoe je zoiets kunt maken. De code kun je downloaden om zelf te gebruiken, echter zonder se "Sluiten"-knop. Zie daarvoor punt 3 in het item Window openen/sluiten vanuit een ander window.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- Inspiratie voor dit item is ontstaan door de site pdf24.org, waar dit wordt toegepast in de offline applicatie voor Windows. Voor deze site heb ik iets nagebouwd wat er op lijkt.
- De code bestaat uit HTML en CSS. JavaScript wordt niet gebruikt.
- De werking van het script
- 0.2 sec.nadat de pagina is geladen start een CSS-animatie die de beweging laat zien.
- De beginsituatie is een balk van 300px breed en 30px hoog. Deze balk wordt smaller gemaakt, totdat deze 30px × 30px (dus vierkant) is.
- Daarna wordt de hoogte vergroot tot 150px, die daarna weer wordt verlaagd tot 30px.
- Tenslotte wordt de breedte weer vergroot tot 300px.
- De animatie wordt oneindig herhaald en kan alleen worden gestopt door de pagina te sluiten of de betreffende HTML-elementen
te verbergen.
- HTML
- De HTML is één enkele <div>-tag met een klase. In het voorbeeld is dat evenBezig.
- Om het goed te laten werken zijn ook de eigenschappen van de <body> met CSS gewijzigd.
- CSS
- De CSS van de body stelt de achtergrondkleur in en regelt de positionering van het de animatie (klasse evenBezig) in het document: align-items:center in verticale richting en justify-content:center in horizontale richting. Hierbij is display:flex noodzakelijk.
- Om de animatie goed te laten werken is het nodig de hoogte van het document op te geven. Daarvoor is hier 100vh
gebruikt. De eenheid vh wordt besproken in het item Over eenheden
in CSS.
- De animatie vindt plaats in de klasse evenBezig. Hier wordt de blauwe kleur ingesteld (R,G,B = 5,147,255), met opacity = 0.8. De hoogte × breedte van de balk wordt ingesteld op 30px × 300px.
- De animatie zelf wordt gedaan door een set @keyframes, met de naam wachtEven. Daarvoor worden de nodige parameters ingesteld.
- Één cyclus van de animatie duurt 2 seconden en omvat het krimpen van de horizontale balk en het groeien van de verticale. De volgende cyclus is in omgekeerde volgorde. Dit wordt oneindig herhaald
- De beweging verloopt lineair, d.w.z. met constante snelheid. De animatie start 0.2 seconden nadat de pagina is geladen.
- De animatie verloopt in drie stappen: 0%, 50%, 100%. Van 0% naar 50% krimpt de breedte van de balk van 300px naar 30px en
daalt de opacity van 0.8 naar 0.3. Van 50% van 100% groeit de hoogte van de balk van 30px naar 150px en stijgt de
opacity van 0.3 naar 0.8.
- Toepassen je eigen site
- Download de zip-file en pak hem uit. Verander de naam html771a.htm in index.html. Je hebt nu een werkend voorbeeld.
- Verander de kleur en de opacity naar je eigen smaak. De waarden van opacity in evenBezig en van opacity bij 0% van de @keyframes moeten aan elkaar gelijk zijn.
- Verander de duration en de delay naar je eigen smaak.
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>).
<style>
body {
background:#fafafa;
display:flex;
align-items:center;
justify-content:center;
height:100vh;
}
.evenBezig {
width:300px; height:30px;
background:rgba(5,147,255,0.8);
animation-name:wachtEven;
animation-duration:2s;
animation-delay:.2s;
animation-timing-function:linear;
animation-direction:alternate;
animation-iteration-count:infinite;
}
@keyframes wachtEven {
0% { width:300px; height:30px; opacity:0.8; }
50% { width:30px; height:30px; opacity:0.3; }
100% { width:30px; height:150px; opacity:0.8; }
}
</style>
(Zet dit in de <BODY>, behalve een "Sluiten"-knop kan er niets anders in staan)
<div class="evenBezig"></div>
Downloaden:
Druk op de knop:
File:voorb771.zipx.zip, 720 bytes.
