Animatie tijdens het laden van een pagina IV
Als je website een applicatie moet opstarten vanaf de server, kan dat soms even duren. Om de 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 de "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 tijdens een surftochtje op internet, waarin ik terecht kwam op Dark CSS. Daar wordt getoond hoe je dit maakt. De code voor dit item is overgenomen van die site, met een paar aanpassingen.
- De code bestaat uit HTML en CSS, JavaScript wordt niet gebruikt.
- De werking van het script
- Het effect begint te werken zodra de pagina is geladen. Het is helemaal gemaakt met CSS.
- HTML
- De HTML bestaat uit een aantal geneste <div>-tags, waarvan de buitenste de klasse kubus heeft. Deze zorgt ervoor dat het effect in het document gepositioneerd wordt en houdt de boel bij elkaar.
- Binnen kubus zijn zes <div>-tags geplaatst, dit zijn de zijvlakken van de kubus. Hiervoor hebben ze
allemaal de klasse zijvlak. Elk zijvlak heeft daarbij nog een eigen klasse, waarmee het zijvlak zelf wordt vastgelegd:
voor, achter, rechts, links, boven en onder.
- De <body> moet, behalve de hier beschreven <div>-tags, geen andere HTML bevatten.
- CSS
- De CSS van het document en van de body zorgt ervoor dat het effect horizontaal en verticaal in het document verschijnt.
De achtergrond is lichtgrijs van kleur, bijna wit. Omdat het hier gaat om een 3D-animatie, is een perspectiefpunt ingesteld:
perspective:1000px;. Omdat de afmetingen van de kubus 100px × 100px × 100px zijn, moet de waarde van
perspective (veel) groter zijn dan 100px, zodat de kubus van (grote) afstand en van buiten wordt bekeken.
De kubus van binnenuit bekijken, dus perspective < 100px, kan een leuk effect opleveren. - De klasse kubus definieert de afmetingen van een zijvlak. Daarbij legt het vast dat het gaat om een 3D-animatie. Verder bepaalt het de animatie door middel van keyframes De animatie verloopt linair, d.w.z. met contante snelheid, en wordt oneindig herhaald. Één animatie duurt 5 seconden.
- De klasse zijvlak functioneert als container voor de zes afzonderlijke zijvlakken. De afmetingen zijn gelijk aan die van kubus.
- Bij de klassen voor, achter, rechts, links, boven en onder wordt steeds de kleur
van een zijvlak gedefinieerd. Elk zijvlak wordt gemaakt uit een begintoestand, een vierkant van 100px × 100px, dat in
het XY-vlak ligt (dat is in zijvlak).
Verplaatsingen zijn steeds gelijk aan de helft van de afmetingen. Bij het voorbeeld is dat dus 100px ÷ 2 = 50px, eventueel voorzien van een minteken. Merk op dat de positieve X-, Y- en Z-assen achtereenvolgens zijn: Van links naar rechts, van boven naar beneden en uit het scherm naar de gebruiker toe.- voor wordt naar de gebruiker toe verplaatst.
- achter wordt van de gebruiker af verplaatst. Daarbij wordt ook over 180° om de Y-as gedraaid, om de oriëntatie naar buiten toe te houden.
- rechts wordt om de Y-as gedraaid over 90° en naar rechts verplaatst.
- links wordt om de Y-as gedraaid over -90° en naar links verplaatst.
- boven wordt om de X-as gedraaid over 90° en naar boven verplaatst.
- onder wordt om de X-as gedraaid over -90° en naar beneden verplaatst.
- De keyframes verdraaien de hele kubus. Hierbij zijn er twee rotaties. Om de X-as over 360°, om de Y-as
over 720°, dus het dubbele van de rotatie om de X-as. Hiermee wordt bereikt dat alle vlakken zichtbaar wordden. Als de
rotatie om de Y-as ook 360° zou zijn, komt het achtervlak nooit in beeld.
- Toepassen in je eigen site
- Download de .zip-file en pak hem uit. Je hebt meteen een werkend voorbeeld. Eventueel hernoem je de file html799a.htm naar index.html.
- Om de animatie uit te schakelen kun je JavaScript gebruiken om de innerHTML van de kubus te vervangen door
je eigen code. Pas daarbij ook de CSS van * en de <body> aan: verander of verwijder display, place-items,
perspective en height.
- Tenslotte...
- Dit is ook geschikt als "wachtcursor" bij een langdurig rekenproces.
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>
* {
padding:0;
margin:0;
box-sizing:border-box;
font-family:sans-serif;
}
body {
background:#fafafa;
display:grid;
place-items:center;
height:100vh;
margin:0;
perspective:1000px;
}
.kubus {
width:100px;
height:100px;
position:relative;
transform-style:preserve-3d;
animation:draaien 5s infinite linear;
}
.zijvlak {
position:absolute;
width:100%;
height:100%;
border:2px solid black;
}
.voor {
background:red;
transform:translateZ(50px);
}
.achter {
background:lime;
transform:translateZ(-50px) rotateY(180deg);
}
.rechts {
background:blue;
transform:translateX(50px) rotateY(90deg);
}
.links {
background:yellow;
transform:translateX(-50px) rotateY(-90deg);
}
.boven {
background:magenta;
transform:translateY(-50px) rotateX(90deg);
}
.onder {
background:cyan;
transform:translateY(50px) rotateX(-90deg);
}
@keyframes draaien {
from { transform:rotateX(0) rotateY(0); }
to { transform: rotateX(360deg) rotateY(720deg); }
}
</style>
(Zet dit in de <BODY>)
<div class="kubus">
<div class="zijvlak voor"></div>
<div class="zijvlak achter"></div>
<div class="zijvlak rechts"></div>
<div class="zijvlak links"></div>
<div class="zijvlak boven"></div>
<div class="zijvlak onder"></div>
</div>
Downloaden:
Druk op de knop:
File: voorb799.zip, 927 bytes.
