Maak een laadscherm met tekst die volloopt

Met een goed laadscherm blijven bezoekers langer op je site zonder dat ze het in de gaten hebben

Zoals te zien op puttertje.mauritshuis.nl

Animaties op een laadscherm zijn een goede manier om bezoekers te laten zien dat er wel iets op je site gebeurt – ze zien immers dat er iets beweegt. Je kunt animaties gebruiken om aan te geven hoe lang het laden van een site nog duurt.

De downloadgrootte van moderne websites blijft maar toenemen doordat er grotere afbeeldingen, geluid, video en extra code voor interactieve functies bijkomen. Dergelijke ‘zware’ sites zijn een probleem voor UX-design. Als die extra items niet fatsoenlijk beheerd worden, wordt een website traag en stroperig. In het ergste geval besluiten bezoekers de website te verlaten voordat hij klaar is met laden. Dat kun je voorkomen met een laadscherm waarop bezoekers zien hoe lang het nog duurt voordat de content van de eigenlijke site geladen is. Dan toon je de inhoud pas of geef je bezoekers de gelegenheid om de site verder te verkennen.

Met een goed laadscherm haal je bezoekers over langer op je site te blijven zonder dat ze dat in de gaten hebben. Je leidt ze als het ware af, zodat ze niet tot de conclusie komen dat de site traag laadt. De voornaamste overweging voor het gebruik van een laadscherm is dat je gebruiker daarmee laat weten dat de website niet bevroren is. Wanneer het enkele seconden duurt voordat de content geladen is, nemen de meeste bezoekers aan dat er niets gebeurt en verlaten ze de site.

De tekst op het laadscherm loopt vol
De 8 loopt vol
1. HTML-document

In de head-sectie van het HTML-document zet je informatie die het document beschrijft en links naar externe bronnen – in dit geval een CSS-bestand en een JavaScript-bestand. In de body-sectie komt de zichtbare inhoud, die je in de volgende stap toevoegt.




Stencil Loader




2. Navigatie-HTML

De inhoud van de pagina bestaat uit het laadscherm en de content die verschijnt nadat de pagina geladen is. Het laadscherm heeft een div-container met daarin een span met het teken ‘8’. Je kunt dat teken vervangen door elke tekst die je wilt. Die container maak je later op met CSS om hem de gewenste style en animatie te geven.

8


Page Title




3. Initieer het CSS-bestand

In styles.css begin je met de CSS-opmaakregels waarmee de HTML- en body-containers het gehele scherm innemen, met een zwarte achtergrond en witte tekst. Stel de margin en padding in op 0 om randen om de pagina te voorkomen.

html,body{
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: Helvetica, sans-serif;
background: #000;
color: #fff;
}

4. Laadscherm-container

Om de HTML overzichtelijk en netjes te houden en de CSS flexibel, verwijs je op abstracte wijze naar de container van het laadscherm. Omdat de regel naar het eerste element in de body verwijst, kun je de div in een ander elementtype veranderen zonder dat je de CSS breekt. Plaats de container linksboven op het scherm en laat hem 100% van de breedte van de viewport innemen.
Stel de grootte van het font zo in dat het 90% van de hoogte van de viewport inneemt. Stel een hoge z-index voor de container in om er zeker van te zijn dat hij altijd boven alle andere content zichtbaar is.

body > *:nth-child(1) {
position: absolute;
background-color: #fff;
top: 0;
left: 0;
z-index: 99999;
text-align: center;
font-weight:bold;
color:transparent;
width: 100vw;
font-size: 90vh;

5. Container-clipping

Met de span in de container van het laadscherm snij je de tekst uit stap 1 met het attribuut ‘backgroundclip’ als het ware uit de achtergrond. Omdat dit attribuut specifiek voor WebKit-browsers is, voeg je een fallback toe voor browsers die dat niet ondersteunen.
Die tonen de tekst dan in het wit, zonder de uitsnede. Stel de laadanimatie zo in dat hij tien seconden duurt. Tot slot stel je een fade-out van twee seconden in die start wanneer de body van het document de klasse ‘loaded’ heeft gekregen.

body > *:nth-child(1) > span {
background: url(image.png) #000 left bottom no-repeat;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
color: #fff;
display:block;
animation: loading 10s forwards;
}

body.loaded > *:nth-child(1){
animation: fade 2s forwards;

6. Definieer de animaties

In deze stap definieer je de animaties voor het laadscherm. Je laat dit scherm uitfaden door het attribuut opacity van volledig zichtbaar naar onzichtbaar te veranderen en de container dan op het laatste moment buiten de viewport te zetten. De animatie ‘loading’ verandert de hoogte van de achtergrondafbeelding van 20% tot de volledige hoogte.

@keyframes fade {
0% { opacity: 1; }
99% { opacity: 0; left: 0;}
100% { left: -100vw; }
}

@keyframes loading {
0% { background-size: 100% 20%; }
100% { background-size: 100% 100%; }
}

7. Detecteer het laden van de pagina

In code.js zet je de code die wacht tot de browser detecteert dat de pagina volledig geladen is. Daarna wordt de klasse ‘loaded’ aan de body toegevoegd. Die klasse triggert de fade-animatie die bij stap 5 aan het laadscherm gehangen werd.

window.addEventListener(“load”, function(){
document.body.className += “ loaded “;
});

8. Laad-simulatie

Het laden van lokale content gaat een stuk sneller dan bij de live-versie. Vervang de code in stap 7 door de code van deze stap als je het uiterlijk van het laadscherm test.

window.addEventListener("load", function(){
setTimeout(function(){
document.body.className += " loaded ";
},5000);
});

Download de bijbehorende bestanden en de volledige code hier en pak ze uit.

Webdesigner 96: WordPress, Flexbox en CSS, Aan de slag met Sass

WordPress is een mooi CMS waar je snel mee uit de voeten kan. Maar als je eenmaal je theme hebt gekozen en content hebt toegevoegd, bestaat de kans dat je je blog of site nog verder wilt aanpassen en optimaliseren. De vraag is hoe je dat dan het beste aanpakt.

Koop direct in onze webshop!

Deel dit artikel of reageer