Direct naar de inhoud Direct naar de inhoud

Handboek HTML5 en CSS3HTML en CSS van <a> tot z-index

Animatie bij het laden van de pagina

De animaties en overgangen van CSS laten onderdelen op de pagina vloeiender bewegen. Denk aan het aanwijzen van een link of menuoptie, of het indrukken van knop. Ingewikkeld hoeft dat niet te zijn. De volgende code verwisselt bij aanwijzen van een link de tekstkleur en de achtergrondkleur:

a {
    background-color: black;
    color: white;
    transition: all 500ms ease-in-out;
}
a:hover {
    background-color: white;
    color: black;
}

Op het element a is naast de eigenschappen voor de tekst- en achtergrondkleur de eigenschap voor overgangen toegepast. De regel transition: all 500ms ease-in-out; betekent: als de toestand van a verandert, pas dan een overgang (transition) toe op alle genoemde eigenschappen (all), die 500 milliseconden duurt (500ms) en de timingfunctie ease-in-out gebruikt.

Het is ook mogelijk om een overgang toe te passen op het laden van een HTML-pagina, zoals op deze site is gedaan. Daar is wel wat JavaScript voor nodig, want er bestaat geen CSS-pseudoklasse zoals :hover voor het laden van een webpagina.

Met JavaScript kan wel het laden van een pagina worden opgemerkt. Laden (load) is in JavaScript een gebeurtenis van het venster, zoals het klikken op een knop (click) of het activeren van een formulierveld (focus) gebeurtenissen van elementen zijn.

Eerst de benodigde CSS. In de stylesheet waarmee de pagina wordt opgebouwd, staat de volgende declaratie:

body {
  opacity: 0;
  transform: translateX(-100vw);
  transition: opacity 800ms ease-in-out,
              transform 400ms ease-in-out;
}
  • Door de doorzichtigheid (opacity) op 0 te zetten, wordt alle inhoud van de body bedekt door de standaard witte achtergrondkleur.
  • Met translateX() wordt de hele pagina naar links buiten beeld verrschoven. De waarde -100vw zorgt ervoor dat de volledige breedte van het venster wordt gebruikt als verschuivingswaarde.
  • De eigenschap transition laat de doorzichtigheid in 800ms van 0 naar de nieuwe waarde gaan en de X-verschuiving in 400ms van -100vw naar de nieuwe waarde. Door dit tijdsverschil ‘voelt’ de overgang vloeiender.

Deze CSS-code zorgt er dus voor dat tijdens het laden en opbouwen van de pagina alle inhoud onzichtbaar is.

Aan de pagina is ook een JavaScript-bestand gekoppeld met de volgende inhoud:

const body = document.querySelector('body');
window.onload = () => body.setAttribute('style', 'opacity: 1; transform: translateX(0)');
window.onbeforeunload = () => body.removeAttribute('style');

De JavaScript-code zorgt ervoor dat van het element body de events load en beforeunload worden opgevangen.

De event load treedt op als de pagina volledig is geladen. Op dat moment wordt de inhoud van de pagina zichtbaar gemaakt door een attribuut style toe te voegen aan het element body. Dankzij de cascade gaan deze regels boven die in de stylesheet. Met opacity: 1 wordt de inhoud zichtbaar gemaakt en de inhoud wordt naar de oorspronkelijke positie verschoven met translateX(0); de verschuiving naar links wordt daarmee ongedaan gemaakt.

De event beforeunload treedt op vlak voordat het venster zijn bronnen loslaat. Als een nieuwe pagina wordt opgevraagd, lost de huidige pagina eerst zijn bronnen. In dit geval zorgt dat ervoor dat het attribuut style wordt verwijderd, waardoor de inhoud van de pagina weer onzichtbaar wordt. Omdat direct daarna de event load van de nieuwe pagina optreedt, wordt die pagina zichtbaar met het ‘slide-in-effect’.

Het resultaat van de code is te zien bij elke paginawissel op deze site.

Tags: css javascript


Reageer op dit artikel

* Vul a.u.b. alle velden in.