Geanimeerde "Laden ..." tekst III: Rollen
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. Hieronder zie je één van de vele mogelijkheden.
L
a
d
e
n
.
.
.
Op deze pagina wordt getoond hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- Inspiratie voor dit item is ontstaan door een filmpje dat ik ergens op internet tegenkwam.
- Dit is de derde in een serie van vier.
- De werking van het script
- De code bestaat uit HTML en CSS. JavaScript wordt niet gebruikt in het voorbeeld.
- De animatie wordt gestart zodra de code van het voorbeeld is geladen.
- HTML
- De HTML van het voorbeeld bestaat uit een enkele <div>-tag met de klasse laden.
- Binnen laden is er voor elke letter van de tekst een <div>-tag, elk met een (unieke) klasse:
laad1, laad3, laad3, enzovoort.
- CSS
- De klasse laden bepaalt de breedte van de animatie en positioneert het geheel in de regel. Daarbij wordt een instelling gemaakt voor het zichtpunt de animatie perspective. Deze instelling kan alleen worden gemaakt in een parent van onderliggende elementen. In dit geval zijn dit de div-tags waar de letters in zitten.
- De tekst in de div-tags binnen de klasse laden wordt "standaard" opgemaakt: kleur, karaktergrootte en -zwaarte. Daarnaast worden instellingen gemaakt voor het assenstelsel en het soort animatie: transform-origin en transform-style:preserve-3d.
- De animatie wordt geregeld via @keyframes, met de naam rol. De eerste 50% (=1 sec.) van de looptijd (animation-duration:2s) draait de letter over 360° om de z-as (loodrecht op het scherm) met de klok mee, in de rest van de looptijd blijft de letter staan.
- De animatie van de opeenvolgende letters wordt om de 0.1 seconde gestart. Dat gebeurt met animation-delay in de klassen laad1, laad3, laad3, enzovoort.
- De animatie loopt oneindig door met animation-iteration-count:infinite;.
- Toepassen in je eigen site
- Download de .zip-file en pak hem uit. Bouw de code op zoals hieronder is aangegeven. Je hebt nu een werkend voorbeeld.
- Verander lettertype, -grootte en/of -zwaarte naar je eigen inzicht.
- Als je een andere tekst wilt dat hier is gebruikt, maak je voor extra letters een extra <div>-tag met een
eigen klasse. Zet die klasse(n) ook in de CSS, met een eigen animation-delay. Als je eigen tekst korter is dan hier
is gebruikt, verwijder je die zaken.
Zorg er steeds voor de width in de klasse laden ruimschoots groot genoeg is om je tekst te bevatten, maar ook niet veel groter.
: - Tenslotte...
- Als de animatie niet meer nodig is en kan worden vervangen door bijvoorbeeld het resultaat van een server-actie, zou het handig kunnen zijn om de innerHTML van de klasse laden te vervangen met behulp van JavaScript.
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">
(Zet dit in de <BODY> op de plaats waar het effect moet verschijnen)
<div class="laden">
<div class="laad1">L</div>
<div class="laad2">a</div>
<div class="laad3">d</div>
<div class="laad4">e</div>
<div class="laad5">n</div>
<div class="laad6"> </div>
<div class="laad7">.</div>
<div class="laad8">.</div>
<div class="laad9">.</div>
</div>
Downloaden:
Druk op de knop:
File: voorb792.zip, 723 bytes.
